diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.js b/docs/data/date-pickers/custom-components/ActionBarComponent.js index 8071aea4d7f6b..4615954c25c1b 100644 --- a/docs/data/date-pickers/custom-components/ActionBarComponent.js +++ b/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} ); @@ -47,7 +47,7 @@ function CustomActionBar(props) { }} key={actionType} > - {localeText.cancelButtonLabel} + {translations.cancelButtonLabel} ); @@ -60,7 +60,7 @@ function CustomActionBar(props) { }} key={actionType} > - {localeText.okButtonLabel} + {translations.okButtonLabel} ); @@ -74,7 +74,7 @@ function CustomActionBar(props) { }} key={actionType} > - {localeText.todayButtonLabel} + {translations.todayButtonLabel} ); diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx index 7985a95c6dfd6..7516085bb00e3 100644 --- a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx +++ b/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(null); const open = Boolean(anchorEl); const id = useId(); @@ -34,7 +34,7 @@ function CustomActionBar(props: PickersActionBarProps) { }} key={actionType} > - {localeText.clearButtonLabel} + {translations.clearButtonLabel} ); case 'cancel': @@ -46,7 +46,7 @@ function CustomActionBar(props: PickersActionBarProps) { }} key={actionType} > - {localeText.cancelButtonLabel} + {translations.cancelButtonLabel} ); case 'accept': @@ -58,7 +58,7 @@ function CustomActionBar(props: PickersActionBarProps) { }} key={actionType} > - {localeText.okButtonLabel} + {translations.okButtonLabel} ); case 'today': @@ -71,7 +71,7 @@ function CustomActionBar(props: PickersActionBarProps) { }} key={actionType} > - {localeText.todayButtonLabel} + {translations.todayButtonLabel} ); default: diff --git a/docs/data/date-pickers/localization/UseLocaleText.tsx.preview b/docs/data/date-pickers/localization/UseLocaleText.tsx.preview new file mode 100644 index 0000000000000..395c5e40aaea3 --- /dev/null +++ b/docs/data/date-pickers/localization/UseLocaleText.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md index d461a3946516f..0e0cbdcc2a617 100644 --- a/docs/data/date-pickers/localization/localization.md +++ b/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. +::: diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index b14f206755ee6..da4b3debfa1d1 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/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,15 +86,15 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar< ...other } = props; - const localeText = useLocaleText(); + const translations = usePickersTranslations(); 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); @@ -102,7 +102,7 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar< return ( ( inProps: DateTimeRangePickerTabsProps, ) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerTabs' }); @@ -122,7 +123,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( sx, } = props; - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(props); const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]); const isPreviousHidden = value === 'start-date'; @@ -130,17 +131,23 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( 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( @@ -195,7 +202,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index f2ff988c224c0..26816d5736023 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx +++ b/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(); + const translations = usePickersTranslations(); const ownerState = props; const classes = useUtilityClasses(ownerState); @@ -212,7 +212,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker 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 value={end} onViewChange={handleEndRangeViewChange} - toolbarTitle={localeText.end} + toolbarTitle={translations.end} ownerState={ownerState} toolbarVariant="desktop" view={rangePosition === 'end' ? view : undefined} diff --git a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx index 6657941e84d6a..467081a8dfc3d 100644 --- a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx +++ b/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 = (( @@ -27,7 +27,7 @@ const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalenda TDate extends PickerValidDate, >(props: PickersRangeCalendarHeaderProps, ref: React.Ref) { const utils = useUtils(); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); 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} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index a0b3a6b24f39f..dab1f11a34515 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/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(); + const translations = usePickersTranslations(); 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, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index e0016ea48423a..ecb9797f7500e 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/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 { usePickersTranslations } from '@mui/x-date-pickers/hooks'; import { PickerValidDate, FieldRef, BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; import useId from '@mui/utils/useId'; import { @@ -78,7 +78,7 @@ export const useMobileRangePicker = < fieldType === 'single-input' ? startFieldRef : undefined, ); const labelId = useId(); - const contextLocaleText = useLocaleText(); + const contextTranslations = usePickersTranslations(); const { open, @@ -193,7 +193,7 @@ export const useMobileRangePicker = < const Layout = slots?.layout ?? PickersLayout; const finalLocaleText = { - ...contextLocaleText, + ...contextTranslations, ...localeText, }; let labelledById = diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index 00382e513bbde..5c06161d17c14 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils, useNow } from '../internals/hooks/useUtils'; import { PickerOnChangeFn } from '../internals/hooks/useViews'; import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions'; import { @@ -385,7 +386,7 @@ export function DayCalendar(inProps: DayCalendarP timezone, }); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const [internalHasFocus, setInternalHasFocus] = useControlled({ name: 'DayCalendar', @@ -562,10 +563,10 @@ export function DayCalendar(inProps: DayCalendarP - {localeText.calendarWeekNumberHeaderText} + {translations.calendarWeekNumberHeaderText} )} {getWeekdays(utils, now).map((weekday, i) => ( @@ -614,11 +615,11 @@ export function DayCalendar(inProps: DayCalendarP - {localeText.calendarWeekNumberText(utils.getWeekNumber(week[0]))} + {translations.calendarWeekNumberText(utils.getWeekNumber(week[0]))} )} {week.map((day, dayIndex) => ( diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 366996ed1a65f..46c31a964c5de 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { DateView, PickerValidDate } from '../models'; import { @@ -87,7 +88,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar< ...other } = props; const utils = useUtils(); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(props); const dateText = React.useMemo(() => { @@ -105,7 +106,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar< return ( ( + inProps: DateTimePickerTabsProps, +) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerTabs' }); const { dateIcon = , @@ -105,7 +108,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa sx, } = props; - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(props); const handleChange = (event: React.SyntheticEvent, value: TabValue) => { @@ -127,12 +130,12 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa > {dateIcon}} /> {timeIcon}} /> diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index c6f456437ae85..fc46e8bf0083b 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { dateTimePickerToolbarClasses, @@ -260,9 +261,9 @@ function DateTimePickerToolbar( const showAmPmControl = Boolean(ampm && !ampmInClock); const isDesktop = toolbarVariant === 'desktop'; - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(ownerState); - const toolbarTitle = inToolbarTitle ?? localeText.dateTimePickerToolbarTitle; + const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle; const formatHours = (time: TDate) => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h'); diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 5a1043e6d2d67..ef7bc618e1787 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { validateDate } from '../internals/utils/validation/validateDate'; import { DateView, PickerValidDate } from '../models'; import { useDesktopPicker } from '../internals/hooks/useDesktopPicker'; @@ -40,7 +41,7 @@ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker< inProps: DesktopDatePickerProps, ref: React.Ref, ) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); // Props with the default values common to all date pickers @@ -91,7 +92,7 @@ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker< valueManager: singleItemValueManager, valueType: 'date', getOpenDialogAriaText: - props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue, + props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue, validator: validateDate, }); diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index b9b40fd3d62f3..42695c7bb8e05 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { validateDateTime } from '../internals/utils/validation/validateDateTime'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { CalendarIcon } from '../icons'; @@ -133,7 +134,7 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< inProps: DesktopDateTimePickerProps, ref: React.Ref, ) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); // Props with the default values common to all date time pickers @@ -226,7 +227,7 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< valueManager: singleItemValueManager, valueType: 'date-time', getOpenDialogAriaText: - props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue, + props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue, validator: validateDateTime, rendererInterceptor, }); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index d0a2d8b38c203..63a21269ac3b1 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { validateTime } from '../internals/utils/validation/validateTime'; import { ClockIcon } from '../icons'; import { useDesktopPicker } from '../internals/hooks/useDesktopPicker'; @@ -46,7 +47,7 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< inProps: DesktopTimePickerProps, ref: React.Ref, ) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); // Props with the default values common to all time pickers @@ -129,7 +130,7 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< valueManager: singleItemValueManager, valueType: 'time', getOpenDialogAriaText: - props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue, + props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue, validator: validateTime, }); diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index bfd5ae2efc296..81d214a13049b 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils, useNow } from '../internals/hooks/useUtils'; import { createIsAfterIgnoreDatePart } from '../internals/utils/time-utils'; import { PickerViewRoot } from '../internals/components/PickerViewRoot'; import { getDigitalClockUtilityClass } from './digitalClockClasses'; @@ -163,7 +164,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock(); + const translations = usePickersTranslations(); const now = useNow(timezone); const ownerState = React.useMemo( @@ -301,7 +302,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock {timeOptions.map((option, index) => { diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 23fe6ab1943e3..870bee0911cf6 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { validateDate } from '../internals/utils/validation/validateDate'; import { DateView, PickerValidDate } from '../models'; import { DateField } from '../DateField'; @@ -39,7 +40,7 @@ const MobileDatePicker = React.forwardRef(function MobileDatePicker< inProps: MobileDatePickerProps, ref: React.Ref, ) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); // Props with the default values common to all date pickers @@ -88,7 +89,7 @@ const MobileDatePicker = React.forwardRef(function MobileDatePicker< valueManager: singleItemValueManager, valueType: 'date', getOpenDialogAriaText: - props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue, + props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue, validator: validateDate, }); diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 9964c55a39482..8c4aa9ac36e2f 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { validateDateTime } from '../internals/utils/validation/validateDateTime'; import { DateOrTimeView, PickerValidDate } from '../models'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; @@ -43,7 +44,7 @@ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker< inProps: MobileDateTimePickerProps, ref: React.Ref, ) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); // Props with the default values common to all date time pickers @@ -103,7 +104,7 @@ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker< valueManager: singleItemValueManager, valueType: 'date-time', getOpenDialogAriaText: - props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue, + props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue, validator: validateDateTime, }); diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 49e09712163b3..1592607671309 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { validateTime } from '../internals/utils/validation/validateTime'; import { PickerValidDate, TimeView } from '../models'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; @@ -39,7 +40,7 @@ const MobileTimePicker = React.forwardRef(function MobileTimePicker< inProps: MobileTimePickerProps, ref: React.Ref, ) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); // Props with the default values common to all time pickers @@ -92,7 +93,7 @@ const MobileTimePicker = React.forwardRef(function MobileTimePicker< valueManager: singleItemValueManager, valueType: 'time', getOpenDialogAriaText: - props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue, + props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue, validator: validateTime, }); diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 1fe03869686f3..bf30b978c5803 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +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'; @@ -114,7 +115,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi valueManager: singleItemValueManager, }); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const now = useNow(timezone); const timeSteps = React.useMemo>( @@ -296,7 +297,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi utils, isDisabled: (hours) => isTimeDisabled(hours, 'hours'), timeStep: timeSteps.hours, - resolveAriaLabel: localeText.hoursClockNumberText, + resolveAriaLabel: translations.hoursClockNumberText, valueOrReferenceDate, }), }; @@ -318,7 +319,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi resolveLabel: (minutes) => utils.format(utils.setMinutes(now, minutes), 'minutes'), timeStep: timeSteps.minutes, hasValue: !!value, - resolveAriaLabel: localeText.minutesClockNumberText, + resolveAriaLabel: translations.minutesClockNumberText, }), }; } @@ -339,7 +340,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi resolveLabel: (seconds) => utils.format(utils.setSeconds(now, seconds), 'seconds'), timeStep: timeSteps.seconds, hasValue: !!value, - resolveAriaLabel: localeText.secondsClockNumberText, + resolveAriaLabel: translations.secondsClockNumberText, }), }; } @@ -380,9 +381,9 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi timeSteps.hours, timeSteps.minutes, timeSteps.seconds, - localeText.hoursClockNumberText, - localeText.minutesClockNumberText, - localeText.secondsClockNumberText, + translations.hoursClockNumberText, + translations.minutesClockNumberText, + translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, @@ -435,7 +436,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi slots={slots} slotProps={slotProps} skipDisabled={skipDisabled} - aria-label={localeText.selectViewText(timeView)} + aria-label={translations.selectViewText(timeView)} /> ))} diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx index f2f5f05ffe384..3b12b4353d024 100644 --- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today'; @@ -32,7 +32,7 @@ export interface PickersActionBarProps extends DialogActionsProps { function PickersActionBar(props: PickersActionBarProps) { const { onAccept, onClear, onCancel, onSetToday, actions, ...other } = props; - const localeText = useLocaleText(); + const translations = usePickersTranslations(); if (actions == null || actions.length === 0) { return null; @@ -43,28 +43,28 @@ function PickersActionBar(props: PickersActionBarProps) { case 'clear': return ( ); case 'cancel': return ( ); case 'accept': return ( ); case 'today': return ( ); diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index d49252d9c441e..8412b01d8848e 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup'; import { ArrowDropDownIcon } from '../icons'; import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher'; @@ -129,7 +130,7 @@ type PickersCalendarHeaderComponent = (( const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader< TDate extends PickerValidDate, >(inProps: PickersCalendarHeaderProps, ref: React.Ref) { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); const props = useThemeProps({ props: inProps, name: 'MuiPickersCalendarHeader' }); @@ -165,7 +166,7 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader< externalSlotProps: slotProps?.switchViewButton, additionalProps: { size: 'small', - 'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(view), + 'aria-label': translations.calendarViewSwitchingButtonAriaLabel(view), }, ownerState, className: classes.switchViewButton, @@ -252,10 +253,10 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader< slotProps={slotProps} onGoToPrevious={selectPreviousMonth} isPreviousDisabled={isPreviousMonthDisabled} - previousLabel={localeText.previousMonth} + previousLabel={translations.previousMonth} onGoToNext={selectNextMonth} isNextDisabled={isNextMonthDisabled} - nextLabel={localeText.nextMonth} + nextLabel={translations.nextMonth} /> diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx index 23a583f9dd71a..26d69784720da 100644 --- a/packages/x-date-pickers/src/TimeClock/Clock.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +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'; @@ -233,7 +234,7 @@ export function Clock(inProps: ClockProps) const ownerState = props; const utils = useUtils(); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const isMoving = React.useRef(false); const classes = useUtilityClasses(ownerState); @@ -372,7 +373,7 @@ export function Clock(inProps: ClockProps) )} (); + const translations = usePickersTranslations(); const now = useNow(timezone); const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews({ @@ -269,7 +270,7 @@ export const TimeClock = React.forwardRef(function TimeClock disabled || isTimeDisabled(hourValue, 'hours'), selectedId, }), @@ -293,7 +294,7 @@ export const TimeClock = React.forwardRef(function TimeClock disabled || isTimeDisabled(minuteValue, 'minutes'), selectedId, }), @@ -317,7 +318,7 @@ export const TimeClock = React.forwardRef(function TimeClock disabled || isTimeDisabled(secondValue, 'seconds'), selectedId, }), @@ -332,9 +333,9 @@ export const TimeClock = React.forwardRef(function TimeClock setView(previousView!)} isPreviousDisabled={!previousView} - previousLabel={localeText.openPreviousView} + previousLabel={translations.openPreviousView} onGoToNext={() => setView(nextView!)} isNextDisabled={!nextView} - nextLabel={localeText.openNextView} + nextLabel={translations.openNextView} ownerState={ownerState} /> )} diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index a24f68cf57115..ef2d545cfad0b 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/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 { usePickersTranslations } from '../hooks/usePickersTranslations'; +import { useUtils } from '../internals/hooks/useUtils'; import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { @@ -165,7 +166,7 @@ function TimePickerToolbar(inProps: TimePickerToo ...other } = props; const utils = useUtils(); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const isRtl = useRtl(); const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours')); @@ -190,7 +191,7 @@ function TimePickerToolbar(inProps: TimePickerToo return ( ( props: TFieldProps, ): UseClearableFieldResponse => { - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const { clearable, onClear, InputProps, sx, slots, slotProps, ...other } = props; @@ -63,7 +63,7 @@ export const useClearableField = ( ownerState: {}, className: 'clearButton', additionalProps: { - title: localeText.fieldClearLabel, + title: translations.fieldClearLabel, }, }); const EndClearIcon = slots?.clearIcon ?? ClearIcon; diff --git a/packages/x-date-pickers/src/hooks/usePickersTranslations.ts b/packages/x-date-pickers/src/hooks/usePickersTranslations.ts new file mode 100644 index 0000000000000..6ad1a7d4bcc28 --- /dev/null +++ b/packages/x-date-pickers/src/hooks/usePickersTranslations.ts @@ -0,0 +1,5 @@ +import { PickerValidDate } from '../models'; +import { useLocalizationContext } from '../internals/hooks/useUtils'; + +export const usePickersTranslations = () => + useLocalizationContext().localeText; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index c6fadb4b23d2f..23e6bbc669000 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/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 { usePickersTranslations } from '../../../hooks/usePickersTranslations'; +import { useUtils, useLocalizationContext } from '../useUtils'; import { UseFieldInternalProps, UseFieldParams, @@ -86,7 +87,7 @@ export const useFieldState = < >, ): UseFieldStateResponse => { const utils = useUtils(); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const adapter = useLocalizationContext(); const isRtl = useRtl(); @@ -136,7 +137,7 @@ export const useFieldState = < buildSectionsFromFormat({ utils, timezone, - localeText, + localeText: translations, localizedDigits, format, date, @@ -149,7 +150,7 @@ export const useFieldState = < [ fieldValueManager, format, - localeText, + translations, localizedDigits, isRtl, shouldRespectLeadingZeros, @@ -285,7 +286,7 @@ export const useFieldState = < const sections = buildSectionsFromFormat({ utils, timezone, - localeText, + localeText: translations, localizedDigits, format, date, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts index 741323d69b4cb..e198a6b999cb4 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts @@ -11,7 +11,8 @@ import { } from './useField.types'; import { getActiveElement } from '../../utils/utils'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; -import { useLocaleText, useUtils } from '../useUtils'; +import { usePickersTranslations } from '../../../hooks/usePickersTranslations'; +import { useUtils } from '../useUtils'; export const useFieldV7TextField: UseFieldTextField = (params) => { const { @@ -43,7 +44,7 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { const sectionListRef = React.useRef(null); const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const utils = useUtils(); const id = useId(); @@ -435,8 +436,10 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { 'aria-valuenow': getSectionValueNow(section, utils), 'aria-valuemin': sectionBoundaries[section.type].minimum, 'aria-valuemax': sectionBoundaries[section.type].maximum, - 'aria-valuetext': section.value ? getSectionValueText(section, utils) : localeText.empty, - 'aria-label': localeText[section.type], + 'aria-valuetext': section.value + ? getSectionValueText(section, utils) + : translations.empty, + 'aria-label': translations[section.type], 'aria-disabled': disabled, spellCheck: isEditable ? false : undefined, autoCapitalize: isEditable ? 'off' : undefined, @@ -471,7 +474,7 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { disabled, readOnly, isContainerEditable, - localeText, + translations, utils, sectionBoundaries, id, diff --git a/packages/x-date-pickers/src/internals/hooks/useUtils.ts b/packages/x-date-pickers/src/internals/hooks/useUtils.ts index 2759b1b050785..a7c2e1d541307 100644 --- a/packages/x-date-pickers/src/internals/hooks/useUtils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useUtils.ts @@ -50,9 +50,6 @@ export const useUtils = () => useLocalizationCont export const useDefaultDates = () => useLocalizationContext().defaultDates; -export const useLocaleText = () => - useLocalizationContext().localeText; - export const useNow = (timezone: PickersTimezone): TDate => { const utils = useUtils(); diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 5eafbf5d1962a..5707f7901c790 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -89,13 +89,7 @@ export type { UseStaticPickerSlots, UseStaticPickerSlotProps, } from './hooks/useStaticPicker'; -export { - useLocalizationContext, - useDefaultDates, - useUtils, - useLocaleText, - useNow, -} from './hooks/useUtils'; +export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hooks/useUtils'; export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews'; export { useViews } from './hooks/useViews'; export { useValidation } from './hooks/useValidation'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index f6927f93c456b..5891788d2c993 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -413,6 +413,7 @@ { "name": "UseMultiInputTimeRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputTimeRangeFieldProps", "kind": "Interface" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, + { "name": "usePickersTranslations", "kind": "Variable" }, { "name": "UseSingleInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseSingleInputDateTimeRangeFieldProps", "kind": "Interface" }, { "name": "UseSingleInputTimeRangeFieldProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 9c5800f297e9d..7ee79ca3a9e1c 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -298,6 +298,7 @@ { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, + { "name": "usePickersTranslations", "kind": "Variable" }, { "name": "UseTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, { "name": "YearCalendar", "kind": "Variable" },