[pickers] Remove plural in Pickers on the new contexts

mui · Nov 6, 2024 · 0dda943 · 0dda943
1 parent 2304191
commit 0dda943
Show file tree

Hide file tree

Showing 58 changed files with 223 additions and 189 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1226,7 +1226,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 
 - 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
 - 🌳 Add `selectItem()` and `getItemDOMElement()` methods to the TreeView component public API
-- ⛏️ Make the `usePickersTranslations` hook public in the pickers component
+- ⛏️ Make the `usePickerTranslations` hook public in the pickers component
 - 🐞 Bugfixes
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
@@ -1250,7 +1250,7 @@ Same changes as in `@mui/x-data-grid-pro@7.9.0`.
 
 #### `@mui/x-date-pickers@7.9.0`
 
-- [pickers] Make the `usePickersTranslations` hook public (#13657) @flaviendelangle
+- [pickers] Make the `usePickerTranslations` hook public (#13657) @flaviendelangle
 
 #### `@mui/x-date-pickers-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 

diff --git 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 { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 
 function CustomActionBar(props) {
   const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const id = useId();

diff --git 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 { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 
 function CustomActionBar(props: PickersActionBarProps) {
   const { onAccept, onClear, onCancel, onSetToday, actions, className } = props;
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
   const open = Boolean(anchorEl);
   const id = useId();

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -7,7 +7,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateField(props) {
@@ -24,7 +24,7 @@ function ButtonDateField(props) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickerContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({
@@ -35,10 +35,10 @@ function ButtonDateField(props) {
   });
 
   const handleTogglePicker = (event) => {
-    if (pickersContext.open) {
-      pickersContext.onClose(event);
+    if (pickerContext.open) {
+      pickerContext.onClose(event);
     } else {
-      pickersContext.onOpen(event);
+      pickerContext.onOpen(event);
     }
   };
 

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -11,7 +11,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateField(props: DatePickerFieldProps) {
@@ -28,7 +28,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickerContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({
@@ -39,10 +39,10 @@ function ButtonDateField(props: DatePickerFieldProps) {
   });
 
   const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickersContext.open) {
-      pickersContext.onClose(event);
+    if (pickerContext.open) {
+      pickerContext.onClose(event);
     } else {
-      pickersContext.onOpen(event);
+      pickerContext.onOpen(event);
     }
   };
 

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js
@@ -9,7 +9,7 @@ import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateRangeField(props) {
@@ -26,7 +26,7 @@ function ButtonDateRangeField(props) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickerContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({
@@ -37,10 +37,10 @@ function ButtonDateRangeField(props) {
   });
 
   const handleTogglePicker = (event) => {
-    if (pickersContext.open) {
-      pickersContext.onClose(event);
+    if (pickerContext.open) {
+      pickerContext.onClose(event);
     } else {
-      pickersContext.onOpen(event);
+      pickerContext.onOpen(event);
     }
   };
 

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
@@ -13,7 +13,7 @@ import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateRangeField(props: DateRangePickerFieldProps) {
@@ -30,7 +30,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickerContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({
@@ -41,10 +41,10 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
   });
 
   const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickersContext.open) {
-      pickersContext.onClose(event);
+    if (pickerContext.open) {
+      pickerContext.onClose(event);
     } else {
-      pickersContext.onOpen(event);
+      pickerContext.onOpen(event);
     }
   };
 

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js
@@ -7,7 +7,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 import { CalendarIcon } from '@mui/x-date-pickers/icons';
 
@@ -16,7 +16,7 @@ function ReadOnlyDateField(props) {
   const { value, timezone, format } = internalProps;
   const { InputProps, slotProps, slots, ...other } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickerContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({
@@ -27,10 +27,10 @@ function ReadOnlyDateField(props) {
   });
 
   const handleTogglePicker = (event) => {
-    if (pickersContext.open) {
-      pickersContext.onClose(event);
+    if (pickerContext.open) {
+      pickerContext.onClose(event);
     } else {
-      pickersContext.onOpen(event);
+      pickerContext.onOpen(event);
     }
   };
 

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx
@@ -11,7 +11,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 import { CalendarIcon } from '@mui/x-date-pickers/icons';
 
@@ -20,7 +20,7 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
   const { value, timezone, format } = internalProps;
   const { InputProps, slotProps, slots, ...other } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickerContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({
@@ -31,10 +31,10 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
   });
 
   const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickersContext.open) {
-      pickersContext.onClose(event);
+    if (pickerContext.open) {
+      pickerContext.onClose(event);
     } else {
-      pickersContext.onOpen(event);
+      pickerContext.onOpen(event);
     }
   };
 

diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md
@@ -134,12 +134,12 @@ 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 `usePickersTranslations` hook to access the translations in your custom components.
+You can use the `usePickerTranslations` hook to access the translations in your custom components.
 
 ```tsx
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 
-const translations = usePickersTranslations();
+const translations = usePickerTranslations();
 ```
 
 :::info

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -259,6 +259,40 @@ const theme = createTheme({
 });
 ```
 
+## Renamed variables
+
+The following variables were renamed to have a coherent naming for the `Picker` / `Pickers` prefix:
+
+- `usePickersTranslation`
+
+  ```diff
+  - import { usePickersTranslation } from '@mui/x-date-pickers/hooks';
+  - import { usePickersTranslation } from '@mui/x-date-pickers';
+  - import { usePickersTranslation } from '@mui/x-date-pickers-pro';
+
+  + import { usePickerTranslation } from '@mui/x-date-pickers/hooks';
+  + import { usePickerTranslation } from '@mui/x-date-pickers';
+  + import { usePickerTranslation } from '@mui/x-date-pickers-pro';
+
+  - const translations = usePickersTranslation();
+  + const translations = usePickerTranslation();
+  ```
+
+  - `usePickersContext`
+
+  ```diff
+  - import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  - import { usePickersContext } from '@mui/x-date-pickers';
+  - import { usePickersContext } from '@mui/x-date-pickers-pro';
+
+  + import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  + import { usePickersContext } from '@mui/x-date-pickers';
+  + import { usePickersContext } from '@mui/x-date-pickers-pro';
+
+  - const pickersContext = usePickersContext();
+  + const pickerContext = usePickerContext();
+  ```
+
 ## Removed types
 
 The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers-pro`.
@@ -381,7 +415,7 @@ If you have customized those translation keys, you have to update them following
 - If you using this translation key in a custom component:
 
 ```diff
- const translations = usePickersTranslations();
+ const translations = usePickerTranslations();
 
 -const clockLabelText = translations.clockLabelText(
 -  view,

diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -13,7 +13,7 @@ import {
   ExportedBaseToolbarProps,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import {
   DateRangePickerToolbarClasses,
@@ -91,7 +91,7 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
     ...other
   } = props;
 
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
 
   const startDateValue = start
     ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate)

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -12,7 +12,7 @@ import {
   ExportedBaseTabsProps,
   isDatePickerView,
 } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import {
@@ -123,7 +123,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
     sx,
   } = props;
 
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -12,7 +12,7 @@ import {
   WrapperVariant,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateTimePickerToolbarProps,
@@ -156,7 +156,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     toolbarPlaceholder,
   };
 
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);

diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import { PickerOwnerState } from '@mui/x-date-pickers/models';
-import { PickersLayoutOwnerState } from '@mui/x-date-pickers/PickersLayout';
+import { PickerLayoutOwnerState } from '@mui/x-date-pickers/PickersLayout';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import {
@@ -193,7 +193,7 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang
         toolbarVariant: 'desktop',
         ...defaultizedProps.slotProps?.toolbar,
       },
-      actionBar: (ownerState: PickersLayoutOwnerState) => ({
+      actionBar: (ownerState: PickerLayoutOwnerState) => ({
         actions: actionBarActions,
         ...resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState),
       }),

diff --git 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 { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';
 
 type PickersRangeCalendarHeaderComponent = ((
@@ -28,7 +28,7 @@ const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalenda
   ref: React.Ref<HTMLDivElement>,
 ) {
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
 
   const { calendars, month, monthIndex, labelId, ...other } = props;
   const {