[pickers] Make the usePickersTranslations hook public (#13657)

Author: flaviendelangle

docs/data/date-pickers/custom-components/ActionBarComponent.js

@@ -9,11 +9,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 
-import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 
 function CustomActionBar(props) {
   const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const id = useId();
@@ -34,7 +34,7 @@ function CustomActionBar(props) {
             }}
             key={actionType}
           >
-            {localeText.clearButtonLabel}
+            {translations.clearButtonLabel}
           </MenuItem>
         );
 
@@ -47,7 +47,7 @@ function CustomActionBar(props) {
             }}
             key={actionType}
           >
-            {localeText.cancelButtonLabel}
+            {translations.cancelButtonLabel}
           </MenuItem>
         );
 
@@ -60,7 +60,7 @@ function CustomActionBar(props) {
             }}
             key={actionType}
           >
-            {localeText.okButtonLabel}
+            {translations.okButtonLabel}
           </MenuItem>
         );
 
@@ -74,7 +74,7 @@ function CustomActionBar(props) {
             }}
             key={actionType}
           >
-            {localeText.todayButtonLabel}
+            {translations.todayButtonLabel}
           </MenuItem>
         );
 

docs/data/date-pickers/custom-components/ActionBarComponent.tsx

@@ -9,11 +9,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
-import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 
 function CustomActionBar(props: PickersActionBarProps) {
   const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
   const open = Boolean(anchorEl);
   const id = useId();
@@ -34,7 +34,7 @@ function CustomActionBar(props: PickersActionBarProps) {
             }}
             key={actionType}
           >
-            {localeText.clearButtonLabel}
+            {translations.clearButtonLabel}
           </MenuItem>
         );
       case 'cancel':
@@ -46,7 +46,7 @@ function CustomActionBar(props: PickersActionBarProps) {
             }}
             key={actionType}
           >
-            {localeText.cancelButtonLabel}
+            {translations.cancelButtonLabel}
           </MenuItem>
         );
       case 'accept':
@@ -58,7 +58,7 @@ function CustomActionBar(props: PickersActionBarProps) {
             }}
             key={actionType}
           >
-            {localeText.okButtonLabel}
+            {translations.okButtonLabel}
           </MenuItem>
         );
       case 'today':
@@ -71,7 +71,7 @@ function CustomActionBar(props: PickersActionBarProps) {
             }}
             key={actionType}
           >
-            {localeText.todayButtonLabel}
+            {translations.todayButtonLabel}
           </MenuItem>
         );
       default:

docs/data/date-pickers/localization/UseLocaleText.tsx.preview

@@ -0,0 +1,11 @@
+<StaticDatePicker
+  defaultValue={dayjs('2022-04-17')}
+  slots={{
+    actionBar: CustomActionBar,
+  }}
+  slotProps={{
+    actionBar: {
+      actions: ['accept'],
+    },
+  }}
+/>

docs/data/date-pickers/localization/localization.md

@@ -131,3 +131,17 @@ You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/x-date
 
 To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
 Note that these translations of the date and time picker components depend on the [Localization strategy](/material-ui/guides/localization/) of the whole library.
+
+## Access the translations in slots and subcomponents
+
+You can use the `usePickersTranslations` hook to access the translations in your custom components.
+
+```tsx
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+
+const translations = usePickersTranslations();
+```
+
+:::info
+See [Custom slots and subcomponents—Action bar](/x/react-date-pickers/custom-components/#component) for more details.
+:::

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

@@ -9,9 +9,9 @@ import {
   PickersToolbarButton,
   useUtils,
   BaseToolbarProps,
-  useLocaleText,
   ExportedBaseToolbarProps,
 } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateRange } from '../models';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -86,23 +86,23 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar<
     ...other
   } = props;
 
-  const localeText = useLocaleText<TDate>();
+  const translations = usePickersTranslations<TDate>();
 
   const startDateValue = start
     ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate)
-    : localeText.start;
+    : translations.start;
 
   const endDateValue = end
     ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate)
-    : localeText.end;
+    : translations.end;
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
 
   return (
     <DateRangePickerToolbarRoot
       {...other}
-      toolbarTitle={localeText.dateRangePickerToolbarTitle}
+      toolbarTitle={translations.dateRangePickerToolbarTitle}
       isLandscape={false}
       className={clsx(className, classes.root)}
       ownerState={ownerState}

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

@@ -5,13 +5,14 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateOrTimeViewWithMeridiem,
-  useLocaleText,
   BaseTabsProps,
   ExportedBaseTabsProps,
   isDatePickerView,
 } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import {
@@ -106,7 +107,7 @@ const DateTimeRangePickerTabFiller = styled('div', {
 
 const tabOptions: TabValue[] = ['start-date', 'start-time', 'end-date', 'end-time'];
 
-const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
+const DateTimeRangePickerTabs = function DateTimeRangePickerTabs<TDate extends PickerValidDate>(
   inProps: DateTimeRangePickerTabsProps,
 ) {
   const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerTabs' });
@@ -122,25 +123,31 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
     sx,
   } = props;
 
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations<TDate>();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
   const tabLabel = React.useMemo(() => {
     switch (value) {
       case 'start-date':
-        return localeText.startDate;
+        return translations.startDate;
       case 'start-time':
-        return localeText.startTime;
+        return translations.startTime;
       case 'end-date':
-        return localeText.endDate;
+        return translations.endDate;
       case 'end-time':
-        return localeText.endTime;
+        return translations.endTime;
       default:
         return '';
     }
-  }, [localeText.endDate, localeText.endTime, localeText.startDate, localeText.startTime, value]);
+  }, [
+    translations.endDate,
+    translations.endTime,
+    translations.startDate,
+    translations.startTime,
+    value,
+  ]);
 
   const handleRangePositionChange = useEventCallback((newTab: TabValue) => {
     if (newTab.includes('start')) {
@@ -176,7 +183,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
         <IconButton
           onClick={changeToPreviousTab}
           className={classes.navigationButton}
-          title={localeText.openPreviousView}
+          title={translations.openPreviousView}
         >
           <ArrowLeftIcon />
         </IconButton>
@@ -195,7 +202,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
         <IconButton
           onClick={changeToNextTab}
           className={classes.navigationButton}
-          title={localeText.openNextView}
+          title={translations.openNextView}
         >
           <ArrowRightIcon />
         </IconButton>

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

@@ -5,12 +5,12 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import {
   BaseToolbarProps,
-  useLocaleText,
   ExportedBaseToolbarProps,
   useUtils,
   DateOrTimeViewWithMeridiem,
   WrapperVariant,
 } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateTimePickerToolbarProps,
@@ -151,7 +151,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     toolbarPlaceholder,
   };
 
-  const localeText = useLocaleText<TDate>();
+  const translations = usePickersTranslations<TDate>();
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
@@ -212,7 +212,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
       <DateTimeRangePickerToolbarStart<TDate>
         value={start}
         onViewChange={handleStartRangeViewChange}
-        toolbarTitle={localeText.start}
+        toolbarTitle={translations.start}
         ownerState={ownerState}
         toolbarVariant="desktop"
         view={rangePosition === 'start' ? view : undefined}
@@ -224,7 +224,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
       <DateTimeRangePickerToolbarEnd<TDate>
         value={end}
         onViewChange={handleEndRangeViewChange}
-        toolbarTitle={localeText.end}
+        toolbarTitle={translations.end}
         ownerState={ownerState}
         toolbarVariant="desktop"
         view={rangePosition === 'end' ? view : undefined}

packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx

@@ -5,11 +5,11 @@ import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   PickersArrowSwitcher,
-  useLocaleText,
   useNextMonthDisabled,
   usePreviousMonthDisabled,
   useUtils,
 } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';
 
 type PickersRangeCalendarHeaderComponent = (<TDate extends PickerValidDate>(
@@ -27,7 +27,7 @@ const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalenda
   TDate extends PickerValidDate,
 >(props: PickersRangeCalendarHeaderProps<TDate>, ref: React.Ref<HTMLDivElement>) {
   const utils = useUtils<TDate>();
-  const localeText = useLocaleText<TDate>();
+  const translations = usePickersTranslations<TDate>();
 
   const { calendars, month, monthIndex, labelId, ...other } = props;
   const {
@@ -70,10 +70,10 @@ const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalenda
       onGoToNext={selectNextMonth}
       isPreviousHidden={monthIndex !== 0}
       isPreviousDisabled={isPreviousMonthDisabled}
-      previousLabel={localeText.previousMonth}
+      previousLabel={translations.previousMonth}
       isNextHidden={monthIndex !== calendars - 1}
       isNextDisabled={isNextMonthDisabled}
-      nextLabel={localeText.nextMonth}
+      nextLabel={translations.nextMonth}
       slots={slots}
       slotProps={slotProps}
       labelId={labelId}

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

@@ -11,12 +11,15 @@ import {
   FieldRef,
   PickerValidDate,
 } from '@mui/x-date-pickers/models';
-import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
+import {
+  UseClearableFieldSlots,
+  UseClearableFieldSlotProps,
+  usePickersTranslations,
+} from '@mui/x-date-pickers/hooks';
 import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
 import {
   BaseFieldProps,
   onSpaceOrEnter,
-  useLocaleText,
   UsePickerResponse,
   WrapperVariant,
   UsePickerProps,
@@ -167,7 +170,7 @@ const useMultiInputFieldSlotProps = <
     TError
   >;
 
-  const localeText = useLocaleText<TDate>();
+  const translations = usePickersTranslations<TDate>();
   const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
 
@@ -245,7 +248,7 @@ const useMultiInputFieldSlotProps = <
       let InputProps: MultiInputFieldSlotTextFieldProps['InputProps'];
       if (ownerState.position === 'start') {
         textFieldProps = {
-          label: inLocaleText?.start ?? localeText.start,
+          label: inLocaleText?.start ?? translations.start,
           onKeyDown: onSpaceOrEnter(openRangeStartSelection),
           onFocus: handleFocusStart,
           focused: open ? rangePosition === 'start' : undefined,
@@ -262,7 +265,7 @@ const useMultiInputFieldSlotProps = <
         }
       } else {
         textFieldProps = {
-          label: inLocaleText?.end ?? localeText.end,
+          label: inLocaleText?.end ?? translations.end,
           onKeyDown: onSpaceOrEnter(openRangeEndSelection),
           onFocus: handleFocusEnd,
           focused: open ? rangePosition === 'end' : undefined,