[pickers] Make the usePickersTranslations hook public

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

@@ -9,7 +9,7 @@ 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 { useLocaleText } from '@mui/x-date-pickers/hooks';
 
 function CustomActionBar(props) {
   const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;

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

@@ -9,7 +9,7 @@ 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 { useLocaleText } from '@mui/x-date-pickers/hooks';
 
 function CustomActionBar(props: PickersActionBarProps) {
   const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;

docs/data/date-pickers/localization/UseLocaleText.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+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/hooks';
+
+function CustomActionBar(props) {
+  const { onAccept, className } = props;
+  const localeText = useLocaleText();
+
+  return (
+    <DialogActions className={className}>
+      <Button onClick={onAccept}>{localeText.okButtonLabel}</Button>
+    </DialogActions>
+  );
+}
+
+export default function UseLocaleText() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDatePicker
+        defaultValue={dayjs('2022-04-17')}
+        slots={{
+          actionBar: CustomActionBar,
+        }}
+        slotProps={{
+          actionBar: {
+            actions: ['accept'],
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+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/hooks';
+
+function CustomActionBar(props: PickersActionBarProps) {
+  const { onAccept, className } = props;
+  const localeText = useLocaleText();
+
+  return (
+    <DialogActions className={className}>
+      <Button onClick={onAccept}>{localeText.okButtonLabel}</Button>
+    </DialogActions>
+  );
+}
+
+export default function UseLocaleText() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDatePicker
+        defaultValue={dayjs('2022-04-17')}
+        slots={{
+          actionBar: CustomActionBar,
+        }}
+        slotProps={{
+          actionBar: {
+            actions: ['accept'],
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

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,10 @@ 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 `useLocaleText` hook to access the translations in your custom components.
+The demo below shows how to use the `localeText.okButtonLabel` translation key in a custom Action Bar:
+
+{{"demo": "UseLocaleText.js", "defaultCodeOpen": false}}

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 { useLocaleText } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateRange } from '../models';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';

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

@@ -7,11 +7,11 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import {
   DateOrTimeViewWithMeridiem,
-  useLocaleText,
   BaseTabsProps,
   ExportedBaseTabsProps,
   isDatePickerView,
 } from '@mui/x-date-pickers/internals';
+import { useLocaleText } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import {

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 { useLocaleText } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateTimePickerToolbarProps,

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 { useLocaleText } from '@mui/x-date-pickers/hooks';
 import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';
 
 type PickersRangeCalendarHeaderComponent = (<TDate extends PickerValidDate>(

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,
+  useLocaleText,
+} from '@mui/x-date-pickers/hooks';
 import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
 import {
   BaseFieldProps,
   onSpaceOrEnter,
-  useLocaleText,
   UsePickerResponse,
   WrapperVariant,
   UsePickerProps,

packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx

@@ -8,10 +8,10 @@ import {
   PickersModalDialog,
   InferError,
   ExportedBaseToolbarProps,
-  useLocaleText,
   DateOrTimeViewWithMeridiem,
   ExportedBaseTabsProps,
 } from '@mui/x-date-pickers/internals';
+import { useLocaleText } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate, FieldRef, BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
 import useId from '@mui/utils/useId';
 import {

packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx

@@ -10,7 +10,8 @@ import {
 } from '@mui/utils';
 import clsx from 'clsx';
 import { PickersDay, PickersDayProps, ExportedPickersDayProps } from '../PickersDay/PickersDay';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import {

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

@@ -5,7 +5,8 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateView, PickerValidDate } from '../models';
 import {

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

@@ -7,7 +7,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from '../icons';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-import { useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
 import {
   DateTimePickerTabsClasses,
   getDateTimePickerTabsUtilityClass,

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

@@ -7,7 +7,8 @@ import clsx from 'clsx';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import {
   dateTimePickerToolbarClasses,

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

@@ -5,7 +5,8 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DesktopDatePickerProps } from './DesktopDatePicker.types';
 import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateDate } from '../internals/utils/validation/validateDate';
 import { DateView, PickerValidDate } from '../models';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';

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

@@ -11,7 +11,8 @@ import {
   DateTimePickerViewRenderers,
 } from '../DateTimePicker/shared';
 import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { CalendarIcon } from '../icons';

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

@@ -6,7 +6,8 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { DesktopTimePickerProps } from './DesktopTimePicker.types';
 import { TimePickerViewRenderers, useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateTime } from '../internals/utils/validation/validateTime';
 import { ClockIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';

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

@@ -8,7 +8,8 @@ import composeClasses from '@mui/utils/composeClasses';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import useForkRef from '@mui/utils/useForkRef';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { getDigitalClockUtilityClass } from './digitalClockClasses';

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

@@ -5,7 +5,8 @@ import { refType } from '@mui/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { MobileDatePickerProps } from './MobileDatePicker.types';
 import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { useUtils, useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateDate } from '../internals/utils/validation/validateDate';
 import { DateView, PickerValidDate } from '../models';
 import { DateField } from '../DateField';

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

@@ -9,7 +9,8 @@ import {
   DateTimePickerViewRenderers,
   useDateTimePickerDefaultizedProps,
 } from '../DateTimePicker/shared';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { DateOrTimeView, PickerValidDate } from '../models';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';

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

@@ -6,7 +6,8 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { MobileTimePickerProps } from './MobileTimePicker.types';
 import { TimePickerViewRenderers, useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateTime } from '../internals/utils/validation/validateTime';
 import { PickerValidDate, TimeView } from '../models';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';

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

@@ -5,7 +5,8 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { useViews } from '../internals/hooks/useViews';
 import type { PickerSelectionState } from '../internals/hooks/usePicker';

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import DialogActions, { DialogActionsProps } from '@mui/material/DialogActions';
-import { useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
 
 export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today';
 

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

@@ -6,7 +6,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
 import { ArrowDropDownIcon } from '../icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';

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

@@ -8,7 +8,8 @@ import {
   unstable_composeClasses as composeClasses,
 } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import type { PickerSelectionState } from '../internals/hooks/usePicker';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared';

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

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { useViews } from '../internals/hooks/useViews';

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

@@ -8,7 +8,8 @@ import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { arrayIncludes } from '../internals/utils/utils';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText } from '../hooks/useLocaleText';
+import { useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import {

packages/x-date-pickers/src/hooks/index.tsx

@@ -5,3 +5,5 @@ export type {
   UseClearableFieldSlotProps,
   UseClearableFieldResponse,
 } from './useClearableField';
+
+export { useLocaleText } from './useLocaleText';

packages/x-date-pickers/src/hooks/useClearableField.tsx

@@ -4,7 +4,7 @@ import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { SxProps } from '@mui/system';
 import { ClearIcon } from '../icons';
-import { useLocaleText } from '../internals/hooks/useUtils';
+import { useLocaleText } from './useLocaleText';
 
 export interface ExportedUseClearableFieldProps {
   /**

packages/x-date-pickers/src/hooks/useLocaleText.ts

@@ -0,0 +1,5 @@
+import { PickerValidDate } from '../models';
+import { useLocalizationContext } from '../internals/hooks/useUtils';
+
+export const useLocaleText = <TDate extends PickerValidDate>() =>
+  useLocalizationContext<TDate>().localeText;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
+import { useLocaleText } from '../../../hooks/useLocaleText';
+import { useUtils, useLocalizationContext } from '../useUtils';
 import {
   UseFieldInternalProps,
   UseFieldParams,