From cad01563dc1f7a5a20180bffa1ab1909668b6c3a Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 28 Jun 2024 13:55:32 +0200 Subject: [PATCH 1/3] [pickers] Make useLocaleText public --- .../custom-components/ActionBarComponent.js | 2 +- .../custom-components/ActionBarComponent.tsx | 2 +- .../localization/UseLocaleText.js | 38 +++++++++++++++++++ .../localization/UseLocaleText.tsx | 38 +++++++++++++++++++ .../localization/UseLocaleText.tsx.preview | 11 ++++++ .../date-pickers/localization/localization.md | 7 ++++ .../DateRangePickerToolbar.tsx | 2 +- .../DateTimeRangePickerTabs.tsx | 2 +- .../DateTimeRangePickerToolbar.tsx | 2 +- .../PickersRangeCalendarHeader.tsx | 2 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 7 +++- .../useMobileRangePicker.tsx | 2 +- .../src/DateCalendar/DayCalendar.tsx | 3 +- .../src/DatePicker/DatePickerToolbar.tsx | 3 +- .../src/DateTimePicker/DateTimePickerTabs.tsx | 2 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 3 +- .../DesktopDatePicker/DesktopDatePicker.tsx | 3 +- .../DesktopDateTimePicker.tsx | 3 +- .../DesktopTimePicker/DesktopTimePicker.tsx | 3 +- .../src/DigitalClock/DigitalClock.tsx | 3 +- .../src/MobileDatePicker/MobileDatePicker.tsx | 3 +- .../MobileDateTimePicker.tsx | 3 +- .../src/MobileTimePicker/MobileTimePicker.tsx | 3 +- .../MultiSectionDigitalClock.tsx | 3 +- .../src/PickersActionBar/PickersActionBar.tsx | 2 +- .../PickersCalendarHeader.tsx | 3 +- .../x-date-pickers/src/TimeClock/Clock.tsx | 3 +- .../src/TimeClock/TimeClock.tsx | 3 +- .../src/TimePicker/TimePickerToolbar.tsx | 3 +- packages/x-date-pickers/src/hooks/index.tsx | 2 + .../src/hooks/useClearableField.tsx | 2 +- .../x-date-pickers/src/hooks/useLocaleText.ts | 5 +++ .../internals/hooks/useField/useFieldState.ts | 3 +- .../hooks/useField/useFieldV7TextField.ts | 3 +- .../src/internals/hooks/useUtils.ts | 3 -- .../x-date-pickers/src/internals/index.ts | 8 +--- scripts/x-date-pickers-pro.exports.json | 1 + scripts/x-date-pickers.exports.json | 1 + 38 files changed, 153 insertions(+), 39 deletions(-) create mode 100644 docs/data/date-pickers/localization/UseLocaleText.js create mode 100644 docs/data/date-pickers/localization/UseLocaleText.tsx create mode 100644 docs/data/date-pickers/localization/UseLocaleText.tsx.preview create mode 100644 packages/x-date-pickers/src/hooks/useLocaleText.ts diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.js b/docs/data/date-pickers/custom-components/ActionBarComponent.js index 8071aea4d7f6b..90700b6d5f4f0 100644 --- a/docs/data/date-pickers/custom-components/ActionBarComponent.js +++ b/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; diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx index 7985a95c6dfd6..07efa129789bc 100644 --- a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx +++ b/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; diff --git a/docs/data/date-pickers/localization/UseLocaleText.js b/docs/data/date-pickers/localization/UseLocaleText.js new file mode 100644 index 0000000000000..e771c8413efd1 --- /dev/null +++ b/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 ( + + + + ); +} + +export default function UseLocaleText() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/localization/UseLocaleText.tsx b/docs/data/date-pickers/localization/UseLocaleText.tsx new file mode 100644 index 0000000000000..3dddedb5c5993 --- /dev/null +++ b/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 ( + + + + ); +} + +export default function UseLocaleText() { + return ( + + + + ); +} 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..c0a292d490523 100644 --- a/docs/data/date-pickers/localization/localization.md +++ b/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}} diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index b14f206755ee6..27c7b575b8908 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 { 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'; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx index d71f3a04fce29..aaf59485cb208 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx +++ b/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 { diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index f2ff988c224c0..f54d56e48c115 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 { useLocaleText } from '@mui/x-date-pickers/hooks'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateTimePickerToolbarProps, diff --git a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx index 6657941e84d6a..ac4ead9dd9c27 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 { useLocaleText } from '@mui/x-date-pickers/hooks'; import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types'; type PickersRangeCalendarHeaderComponent = (( 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..9529560261433 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, + useLocaleText, +} from '@mui/x-date-pickers/hooks'; import { PickersInputLocaleText } from '@mui/x-date-pickers/locales'; import { BaseFieldProps, onSpaceOrEnter, - useLocaleText, UsePickerResponse, WrapperVariant, UsePickerProps, 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..88c395e391e94 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 { useLocaleText } from '@mui/x-date-pickers/hooks'; import { PickerValidDate, FieldRef, BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; import useId from '@mui/utils/useId'; import { diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index 00382e513bbde..f5ccd0a83d78c 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 { 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 { diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 366996ed1a65f..b592e12df0eec 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 { useLocaleText } from '../hooks/useLocaleText'; +import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { DateView, PickerValidDate } from '../models'; import { diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index 72b58d1c4f941..9e2e0da8a9dca 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/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, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index c6f456437ae85..9952f0ea99516 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 { useLocaleText } from '../hooks/useLocaleText'; +import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { dateTimePickerToolbarClasses, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 5a1043e6d2d67..cddabe072a61a 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 { 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'; diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index b9b40fd3d62f3..da8c284284122 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 { 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'; diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index d0a2d8b38c203..48d50bbc873d5 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 { 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'; diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index bfd5ae2efc296..cb6d1ff5c820b 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 { 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'; diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 23fe6ab1943e3..9facd9fd07765 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 { 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'; diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 9964c55a39482..d8e3a0df2fb5b 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 { 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'; diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 49e09712163b3..17f5a0e1305e3 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 { 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'; diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 1fe03869686f3..c7700d69a37f0 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 { 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'; diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx index f2f5f05ffe384..e4f93cbf4b3ed 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 { useLocaleText } from '../hooks/useLocaleText'; export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today'; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index d49252d9c441e..db29ab29ec42c 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 { 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'; diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx index 23a583f9dd71a..225a6e7c25b9b 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 { 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'; diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index d810209f30475..f800fa1ba819c 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/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'; diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index a24f68cf57115..7fe87df2b3c9d 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 { 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 { diff --git a/packages/x-date-pickers/src/hooks/index.tsx b/packages/x-date-pickers/src/hooks/index.tsx index 40f52b8c93d7e..1737582e69711 100644 --- a/packages/x-date-pickers/src/hooks/index.tsx +++ b/packages/x-date-pickers/src/hooks/index.tsx @@ -5,3 +5,5 @@ export type { UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField'; + +export { useLocaleText } from './useLocaleText'; diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 27815914b83c5..12ec331be5763 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/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 { /** diff --git a/packages/x-date-pickers/src/hooks/useLocaleText.ts b/packages/x-date-pickers/src/hooks/useLocaleText.ts new file mode 100644 index 0000000000000..9a07f0a323652 --- /dev/null +++ b/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 = () => + 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..c9baa1259a0e5 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 { useLocaleText } from '../../../hooks/useLocaleText'; +import { useUtils, useLocalizationContext } from '../useUtils'; import { UseFieldInternalProps, UseFieldParams, 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..3e70b2f971ea4 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 { useLocaleText } from '../../../hooks/useLocaleText'; +import { useUtils } from '../useUtils'; export const useFieldV7TextField: UseFieldTextField = (params) => { const { 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..3f2aecf55ea28 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -406,6 +406,7 @@ { "name": "UseDateRangeFieldProps", "kind": "Interface" }, { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, + { "name": "useLocaleText", "kind": "Variable" }, { "name": "UseMultiInputDateRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseMultiInputDateTimeRangeFieldComponentProps", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 9c5800f297e9d..5d869fc76e701 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -297,6 +297,7 @@ { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, + { "name": "useLocaleText", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, { "name": "UseTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, From 4c1fe7046e07706dbfbe563cd12f1997a6140773 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 2 Jul 2024 08:55:34 +0200 Subject: [PATCH 2/3] Work on doc --- .../custom-components/ActionBarComponent.tsx | 12 +++--- .../localization/UseLocaleText.js | 38 ------------------- .../localization/UseLocaleText.tsx | 38 ------------------- .../date-pickers/localization/localization.md | 13 +++++-- .../DateRangePickerToolbar.tsx | 10 ++--- .../DateTimeRangePickerTabs.tsx | 27 ++++++++----- .../DateTimeRangePickerToolbar.tsx | 8 ++-- .../PickersRangeCalendarHeader.tsx | 8 ++-- .../hooks/useEnrichedRangePickerFieldProps.ts | 8 ++-- .../useMobileRangePicker.tsx | 6 +-- .../src/DateCalendar/DayCalendar.tsx | 12 +++--- .../src/DatePicker/DatePickerToolbar.tsx | 6 +-- .../src/DateTimePicker/DateTimePickerTabs.tsx | 13 ++++--- .../DateTimePicker/DateTimePickerToolbar.tsx | 6 +-- .../DesktopDatePicker/DesktopDatePicker.tsx | 6 +-- .../DesktopDateTimePicker.tsx | 6 +-- .../DesktopTimePicker/DesktopTimePicker.tsx | 6 +-- .../src/DigitalClock/DigitalClock.tsx | 6 +-- .../src/MobileDatePicker/MobileDatePicker.tsx | 6 +-- .../MobileDateTimePicker.tsx | 6 +-- .../src/MobileTimePicker/MobileTimePicker.tsx | 6 +-- .../MultiSectionDigitalClock.tsx | 18 ++++----- .../src/PickersActionBar/PickersActionBar.tsx | 12 +++--- .../PickersCalendarHeader.tsx | 10 ++--- .../x-date-pickers/src/TimeClock/Clock.tsx | 6 +-- .../src/TimeClock/TimeClock.tsx | 20 +++++----- .../src/TimePicker/TimePickerToolbar.tsx | 6 +-- packages/x-date-pickers/src/hooks/index.tsx | 2 +- .../src/hooks/useClearableField.tsx | 6 +-- ...ocaleText.ts => usePickersTranslations.ts} | 2 +- .../internals/hooks/useField/useFieldState.ts | 10 ++--- .../hooks/useField/useFieldV7TextField.ts | 12 +++--- scripts/x-date-pickers-pro.exports.json | 2 +- scripts/x-date-pickers.exports.json | 2 +- 34 files changed, 149 insertions(+), 206 deletions(-) delete mode 100644 docs/data/date-pickers/localization/UseLocaleText.js delete mode 100644 docs/data/date-pickers/localization/UseLocaleText.tsx rename packages/x-date-pickers/src/hooks/{useLocaleText.ts => usePickersTranslations.ts} (68%) diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx index 07efa129789bc..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/hooks'; +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.js b/docs/data/date-pickers/localization/UseLocaleText.js deleted file mode 100644 index e771c8413efd1..0000000000000 --- a/docs/data/date-pickers/localization/UseLocaleText.js +++ /dev/null @@ -1,38 +0,0 @@ -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 ( - - - - ); -} - -export default function UseLocaleText() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/localization/UseLocaleText.tsx b/docs/data/date-pickers/localization/UseLocaleText.tsx deleted file mode 100644 index 3dddedb5c5993..0000000000000 --- a/docs/data/date-pickers/localization/UseLocaleText.tsx +++ /dev/null @@ -1,38 +0,0 @@ -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 ( - - - - ); -} - -export default function UseLocaleText() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md index c0a292d490523..0e0cbdcc2a617 100644 --- a/docs/data/date-pickers/localization/localization.md +++ b/docs/data/date-pickers/localization/localization.md @@ -134,7 +134,14 @@ Note that these translations of the date and time picker components depend on th ## 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: +You can use the `usePickersTranslations` hook to access the translations in your custom components. -{{"demo": "UseLocaleText.js", "defaultCodeOpen": false}} +```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 27c7b575b8908..da4b3debfa1d1 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -11,7 +11,7 @@ import { BaseToolbarProps, ExportedBaseToolbarProps, } from '@mui/x-date-pickers/internals'; -import { useLocaleText } from '@mui/x-date-pickers/hooks'; +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 f54d56e48c115..26816d5736023 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx @@ -10,7 +10,7 @@ import { DateOrTimeViewWithMeridiem, WrapperVariant, } from '@mui/x-date-pickers/internals'; -import { useLocaleText } from '@mui/x-date-pickers/hooks'; +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 ac4ead9dd9c27..467081a8dfc3d 100644 --- a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx +++ b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx @@ -9,7 +9,7 @@ import { usePreviousMonthDisabled, useUtils, } from '@mui/x-date-pickers/internals'; -import { useLocaleText } from '@mui/x-date-pickers/hooks'; +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 9529560261433..dab1f11a34515 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -14,7 +14,7 @@ import { import { UseClearableFieldSlots, UseClearableFieldSlotProps, - useLocaleText, + usePickersTranslations, } from '@mui/x-date-pickers/hooks'; import { PickersInputLocaleText } from '@mui/x-date-pickers/locales'; import { @@ -170,7 +170,7 @@ const useMultiInputFieldSlotProps = < TError >; - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef); const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef); @@ -248,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, @@ -265,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 88c395e391e94..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 @@ -11,7 +11,7 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, } from '@mui/x-date-pickers/internals'; -import { useLocaleText } from '@mui/x-date-pickers/hooks'; +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 f5ccd0a83d78c..5c06161d17c14 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx @@ -10,7 +10,7 @@ import { } from '@mui/utils'; import clsx from 'clsx'; import { PickersDay, PickersDayProps, ExportedPickersDayProps } from '../PickersDay/PickersDay'; -import { useLocaleText } from '../hooks/useLocaleText'; +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'; @@ -386,7 +386,7 @@ export function DayCalendar(inProps: DayCalendarP timezone, }); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const [internalHasFocus, setInternalHasFocus] = useControlled({ name: 'DayCalendar', @@ -563,10 +563,10 @@ export function DayCalendar(inProps: DayCalendarP - {localeText.calendarWeekNumberHeaderText} + {translations.calendarWeekNumberHeaderText} )} {getWeekdays(utils, now).map((weekday, i) => ( @@ -615,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 b592e12df0eec..46c31a964c5de 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -5,7 +5,7 @@ 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 } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { DateView, PickerValidDate } from '../models'; @@ -88,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(() => { @@ -106,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 9952f0ea99516..fc46e8bf0083b 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -7,7 +7,7 @@ import clsx from 'clsx'; import { PickersToolbarText } from '../internals/components/PickersToolbarText'; import { PickersToolbar } from '../internals/components/PickersToolbar'; import { PickersToolbarButton } from '../internals/components/PickersToolbarButton'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; import { @@ -261,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 cddabe072a61a..ef7bc618e1787 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -5,7 +5,7 @@ import { refType } from '@mui/utils'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { DesktopDatePickerProps } from './DesktopDatePicker.types'; import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DatePicker/shared'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateDate } from '../internals/utils/validation/validateDate'; import { DateView, PickerValidDate } from '../models'; @@ -41,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 @@ -92,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 da8c284284122..42695c7bb8e05 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -11,7 +11,7 @@ import { DateTimePickerViewRenderers, } from '../DateTimePicker/shared'; import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateDateTime } from '../internals/utils/validation/validateDateTime'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; @@ -134,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 @@ -227,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 48d50bbc873d5..63a21269ac3b1 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -6,7 +6,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { TimeField } from '../TimeField'; import { DesktopTimePickerProps } from './DesktopTimePicker.types'; import { TimePickerViewRenderers, useTimePickerDefaultizedProps } from '../TimePicker/shared'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateTime } from '../internals/utils/validation/validateTime'; import { ClockIcon } from '../icons'; @@ -47,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 @@ -130,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 cb6d1ff5c820b..81d214a13049b 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -8,7 +8,7 @@ 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 { useLocaleText } from '../hooks/useLocaleText'; +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'; @@ -164,7 +164,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock(); + const translations = usePickersTranslations(); const now = useNow(timezone); const ownerState = React.useMemo( @@ -302,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 9facd9fd07765..870bee0911cf6 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -5,7 +5,7 @@ import { refType } from '@mui/utils'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; import { MobileDatePickerProps } from './MobileDatePicker.types'; import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DatePicker/shared'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateDate } from '../internals/utils/validation/validateDate'; import { DateView, PickerValidDate } from '../models'; @@ -40,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 @@ -89,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 d8e3a0df2fb5b..8c4aa9ac36e2f 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -9,7 +9,7 @@ import { DateTimePickerViewRenderers, useDateTimePickerDefaultizedProps, } from '../DateTimePicker/shared'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateDateTime } from '../internals/utils/validation/validateDateTime'; import { DateOrTimeView, PickerValidDate } from '../models'; @@ -44,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 @@ -104,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 17f5a0e1305e3..1592607671309 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -6,7 +6,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { TimeField } from '../TimeField'; import { MobileTimePickerProps } from './MobileTimePicker.types'; import { TimePickerViewRenderers, useTimePickerDefaultizedProps } from '../TimePicker/shared'; -import { useLocaleText } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateTime } from '../internals/utils/validation/validateTime'; import { PickerValidDate, TimeView } from '../models'; @@ -40,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 @@ -93,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 c7700d69a37f0..bf30b978c5803 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -5,7 +5,7 @@ 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 { useLocaleText } from '../hooks/useLocaleText'; +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'; @@ -115,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>( @@ -297,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, }), }; @@ -319,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, }), }; } @@ -340,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, }), }; } @@ -381,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, @@ -436,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 e4f93cbf4b3ed..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 '../hooks/useLocaleText'; +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 db29ab29ec42c..8412b01d8848e 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -6,7 +6,7 @@ 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 } from '../hooks/useLocaleText'; +import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup'; import { ArrowDropDownIcon } from '../icons'; @@ -130,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' }); @@ -166,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, @@ -253,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 225a6e7c25b9b..26d69784720da 100644 --- a/packages/x-date-pickers/src/TimeClock/Clock.tsx +++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx @@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses, } from '@mui/utils'; import { ClockPointer } from './ClockPointer'; -import { useLocaleText } from '../hooks/useLocaleText'; +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'; @@ -234,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); @@ -373,7 +373,7 @@ export function Clock(inProps: ClockProps) )} (); + const translations = usePickersTranslations(); const now = useNow(timezone); const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews({ @@ -270,7 +270,7 @@ export const TimeClock = React.forwardRef(function TimeClock disabled || isTimeDisabled(hourValue, 'hours'), selectedId, }), @@ -294,7 +294,7 @@ export const TimeClock = React.forwardRef(function TimeClock disabled || isTimeDisabled(minuteValue, 'minutes'), selectedId, }), @@ -318,7 +318,7 @@ export const TimeClock = React.forwardRef(function TimeClock disabled || isTimeDisabled(secondValue, 'seconds'), selectedId, }), @@ -333,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 7fe87df2b3c9d..ef2d545cfad0b 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -8,7 +8,7 @@ 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 } from '../hooks/useLocaleText'; +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'; @@ -166,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')); @@ -191,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/useLocaleText.ts b/packages/x-date-pickers/src/hooks/usePickersTranslations.ts similarity index 68% rename from packages/x-date-pickers/src/hooks/useLocaleText.ts rename to packages/x-date-pickers/src/hooks/usePickersTranslations.ts index 9a07f0a323652..6ad1a7d4bcc28 100644 --- a/packages/x-date-pickers/src/hooks/useLocaleText.ts +++ b/packages/x-date-pickers/src/hooks/usePickersTranslations.ts @@ -1,5 +1,5 @@ import { PickerValidDate } from '../models'; import { useLocalizationContext } from '../internals/hooks/useUtils'; -export const useLocaleText = () => +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 c9baa1259a0e5..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,7 @@ import * as React from 'react'; import useControlled from '@mui/utils/useControlled'; import { useRtl } from '@mui/system/RtlProvider'; -import { useLocaleText } from '../../../hooks/useLocaleText'; +import { usePickersTranslations } from '../../../hooks/usePickersTranslations'; import { useUtils, useLocalizationContext } from '../useUtils'; import { UseFieldInternalProps, @@ -87,7 +87,7 @@ export const useFieldState = < >, ): UseFieldStateResponse => { const utils = useUtils(); - const localeText = useLocaleText(); + const translations = usePickersTranslations(); const adapter = useLocalizationContext(); const isRtl = useRtl(); @@ -137,7 +137,7 @@ export const useFieldState = < buildSectionsFromFormat({ utils, timezone, - localeText, + localeText: translations, localizedDigits, format, date, @@ -150,7 +150,7 @@ export const useFieldState = < [ fieldValueManager, format, - localeText, + translations, localizedDigits, isRtl, shouldRespectLeadingZeros, @@ -286,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 3e70b2f971ea4..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,7 @@ import { } from './useField.types'; import { getActiveElement } from '../../utils/utils'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; -import { useLocaleText } from '../../../hooks/useLocaleText'; +import { usePickersTranslations } from '../../../hooks/usePickersTranslations'; import { useUtils } from '../useUtils'; export const useFieldV7TextField: UseFieldTextField = (params) => { @@ -44,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(); @@ -436,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, @@ -472,7 +474,7 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { disabled, readOnly, isContainerEditable, - localeText, + translations, utils, sectionBoundaries, id, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 3f2aecf55ea28..5891788d2c993 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -406,7 +406,6 @@ { "name": "UseDateRangeFieldProps", "kind": "Interface" }, { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, - { "name": "useLocaleText", "kind": "Variable" }, { "name": "UseMultiInputDateRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseMultiInputDateTimeRangeFieldComponentProps", "kind": "TypeAlias" }, @@ -414,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 5d869fc76e701..7ee79ca3a9e1c 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -297,8 +297,8 @@ { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, - { "name": "useLocaleText", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, + { "name": "usePickersTranslations", "kind": "Variable" }, { "name": "UseTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, { "name": "YearCalendar", "kind": "Variable" }, From 48102fddd934a3878c60ca867bec72fc5e91ac50 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 2 Jul 2024 11:06:37 +0200 Subject: [PATCH 3/3] Fix --- .../custom-components/ActionBarComponent.js | 12 ++++++------ .../src/DateTimePicker/DateTimePickerTabs.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.js b/docs/data/date-pickers/custom-components/ActionBarComponent.js index 90700b6d5f4f0..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/hooks'; +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/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index 916055e5ea55a..4e04145fcf473 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -108,7 +108,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(); const classes = useUtilityClasses(props); const handleChange = (event: React.SyntheticEvent, value: TabValue) => {