@mui/x-date-pickers 7.21.0 → 7.22.1

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.1
+
+_Nov 1, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Polish (pl-PL) locale on the Date Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@wojtkolos, @dpak-maurya, @k-rajat19.
+Following are all team members who have contributed to this release:
+@LukasTy, @arminmeh, @MBilalShafi, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.1`
+
+- [DataGrid] Fix right column group header border (#15152) @KenanYusuf
+- [DataGrid] Fix scroll jump when holding down arrow keys (#15167) @arminmeh
+- [DataGrid] Move `rowGroupingModelChange` handler to respective hook (#15127) @MBilalShafi
+- [DataGrid] Prevent error when deleting the last row (#15153) @dpak-maurya
+- [DataGrid] Fix overlay height in autoHeight mode (#15205) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.1`, plus:
+
+- [DataGridPro] Add list view tests (#15166) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+- [DataGridPremium] Keep focus on the grouping cell on space bar press #15155 @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.1`
+
+- [l10n] Improve Polish (pl-PL) locale (#15177) @wojtkolos
+
+#### `@mui/x-date-pickers-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.1`
+
+- [TreeView] Export `TreeItem2DragAndDropOverlay` and `TreeItem2LabelInput` from the root of each package (#15208) @flaviendelangle
+- [TreeView] Fix drag and drop color usage (#15149) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.22.1`.
+
+### Docs
+
+- [docs] Add section explaining how to keep the selection while filtering in Data grid docs (#15199) @arminmeh
+
+## 7.22.0
+
+_Oct 25, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce [server-side support for Data Grid row grouping](https://mui.com/x/react-data-grid/server-side-data/row-grouping/)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Portuguese (pt-BR) locale on the Data Grid component
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@clins1994, @GITPHLAP, @k-rajat19, @kalyan90, @merotosc, @yash49.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.0`
+
+- [DataGrid] Fix `GridPanelAnchor` positioning (#15022) @k-rajat19
+- [DataGrid] Fix ugly prop-types for the `pageStyle` prop of the `GridPrintExportMenuItem` component (#15015) @flaviendelangle
+- [DataGrid] Fix value type in filter model for number and boolean column type (#14733) @k-rajat19
+- [DataGrid] Focus next row when the focused row is deleted (#15067) @cherniavskii
+- [DataGrid] Remove some usages of `<Box />` and `<Badge />` (#15013) @romgrk
+- [DataGrid] Fix number of rows to display for page size options with negative value (#14890) @kalyan90
+- [l10n] Improve Portuguese (pt-BR) locale (#15021) @k-rajat19
+
+#### `@mui/x-data-grid-pro@7.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.0`, plus:
+
+- [DataGridPro] Fix column pinning layout (#15073) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.22.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.22.0`, plus:
+
+- [DataGridPremium] Server-side data source with row grouping (#15109) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.0`
+
+- [pickers] Fix `DateCalendar` timezone management (#15119) @LukasTy
+- [pickers] Fix `DigitalClock` time options on a `DST` switch day (#15092) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.22.0`
+
+- [charts] Export data type in `onAxisClick(_, data)` callback (#15038) @clins1994
+
+#### `@mui/x-charts-pro@7.0.0-beta.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.0`
+
+- [TreeView] Make the cancellable event types public (#14992) @flaviendelangle
+
+### Docs
+
+- [docs] Fix typo in Tree View docs (#15047) @yash49
+
+### Core
+
+- [core] Adjust cherry-pick GH actions (#15101) @LukasTy
+- [core] Update prettier target branch (#15100) @MBilalShafi
+- [core] Update some `default-branch-switch` instances for `v7.x` (#15085) @MBilalShafi
+- [test] Revert to using `fireEvent` instead of `userEvent` (#14927) @LukasTy
+
 ## 7.21.0
 
 _Oct 17, 2024_

package/DateCalendar/DayCalendar.js

@@ -378,9 +378,8 @@ export function DayCalendar(inProps) {
     return internalFocusedDay;
   }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
-    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
-    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
+    const toDisplay = utils.getWeekArray(currentMonth);
+    let nextMonth = utils.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -392,7 +391,7 @@ export function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils, timezone]);
+  }, [currentMonth, fixedWeekNumber, utils]);
   return /*#__PURE__*/_jsxs(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/DateCalendar/useCalendarState.d.ts

@@ -22,7 +22,9 @@ interface ChangeFocusedDayPayload<TDate extends PickerValidDate> {
      */
     withoutMonthSwitchingAnimation?: boolean;
 }
-export declare const createCalendarStateReducer: <TDate extends PickerValidDate>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
+export declare const createCalendarStateReducer: <TDate extends PickerValidDate>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeMonthTimezone", {
+    newTimezone: string;
+}> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
 interface UseCalendarStateParams<TDate extends PickerValidDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
     timezone: PickersTimezone;

package/DateCalendar/useCalendarState.js

@@ -15,6 +15,20 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
         currentMonth: action.newMonth,
         isMonthSwitchingAnimating: !reduceAnimations
       });
+    case 'changeMonthTimezone':
+      {
+        const newTimezone = action.newTimezone;
+        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+          return state;
+        }
+        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
+        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
+          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        }
+        return _extends({}, state, {
+          currentMonth: newCurrentMonth
+        });
+      }
     case 'finishMonthSwitchingAnimation':
       return _extends({}, state, {
         isMonthSwitchingAnimating: false
@@ -61,14 +75,25 @@ export const useCalendarState = params => {
       referenceDate: referenceDateProp,
       granularity: SECTION_TYPE_GRANULARITY.day
     });
-  }, [] // eslint-disable-line react-hooks/exhaustive-deps
-  );
+  },
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [referenceDateProp, timezone]);
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+
+  // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
+  // https://github.com/mui/mui-x/issues/10804
+  React.useEffect(() => {
+    dispatch({
+      type: 'changeMonthTimezone',
+      newTimezone: utils.getTimezone(referenceDate)
+    });
+  }, [referenceDate, utils]);
   const handleChangeMonth = React.useCallback(payload => {
     dispatch(_extends({
       type: 'changeMonth'

package/DigitalClock/DigitalClock.js

@@ -232,10 +232,14 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
+    const result = [];
     const startOfDay = utils.startOfDay(valueOrReferenceDate);
-    return [startOfDay, ...Array.from({
-      length: Math.ceil(24 * 60 / timeStep) - 1
-    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
+    let nextTimeStepOption = startOfDay;
+    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+      result.push(nextTimeStepOption);
+      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+    }
+    return result;
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
@@ -298,7 +302,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
           tabIndex: tabIndex
         }, clockItemProps, {
           children: formattedValue
-        }), formattedValue);
+        }), `${option.valueOf()}-${formattedValue}`);
       })
     })
   }));

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.21.0
+ * @mui/x-date-pickers v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/plPL.js

@@ -16,11 +16,10 @@ const plPLPickers = {
   // DateRange labels
   start: 'Początek',
   end: 'Koniec',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Data rozpoczęcia',
+  startTime: 'Czas rozpoczęcia',
+  endDate: 'Data zakończenia',
+  endTime: 'Czas zakończenia',
   // Action bar
   cancelButtonLabel: 'Anuluj',
   clearButtonLabel: 'Wyczyść',
@@ -46,12 +45,10 @@ const plPLPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils, formattedDate) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Wybierz datę',
   openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Wybierz czas',
-  // fieldClearLabel: 'Clear',
-
+  fieldClearLabel: 'Wyczyść',
   // Table labels
   timeTableLabel: 'wybierz czas',
-  dateTableLabel: 'wybierz datę'
-
+  dateTableLabel: 'wybierz datę',
   // Field section placeholders
   // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
   // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
@@ -63,13 +60,13 @@ const plPLPickers = {
   // fieldMeridiemPlaceholder: () => 'aa',
 
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
+  year: 'Rok',
+  month: 'Miesiąc',
+  day: 'Dzień',
+  weekDay: 'Dzień tygodnia',
+  hours: 'Godzin',
+  minutes: 'Minut',
+  seconds: 'Sekund'
   // meridiem: 'Meridiem',
 
   // Common

package/modern/DateCalendar/DayCalendar.js

@@ -378,9 +378,8 @@ export function DayCalendar(inProps) {
     return internalFocusedDay;
   }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
-    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
-    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
+    const toDisplay = utils.getWeekArray(currentMonth);
+    let nextMonth = utils.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -392,7 +391,7 @@ export function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils, timezone]);
+  }, [currentMonth, fixedWeekNumber, utils]);
   return /*#__PURE__*/_jsxs(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/modern/DateCalendar/useCalendarState.js

@@ -15,6 +15,20 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
         currentMonth: action.newMonth,
         isMonthSwitchingAnimating: !reduceAnimations
       });
+    case 'changeMonthTimezone':
+      {
+        const newTimezone = action.newTimezone;
+        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+          return state;
+        }
+        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
+        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
+          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        }
+        return _extends({}, state, {
+          currentMonth: newCurrentMonth
+        });
+      }
     case 'finishMonthSwitchingAnimation':
       return _extends({}, state, {
         isMonthSwitchingAnimating: false
@@ -61,14 +75,25 @@ export const useCalendarState = params => {
       referenceDate: referenceDateProp,
       granularity: SECTION_TYPE_GRANULARITY.day
     });
-  }, [] // eslint-disable-line react-hooks/exhaustive-deps
-  );
+  },
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [referenceDateProp, timezone]);
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+
+  // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
+  // https://github.com/mui/mui-x/issues/10804
+  React.useEffect(() => {
+    dispatch({
+      type: 'changeMonthTimezone',
+      newTimezone: utils.getTimezone(referenceDate)
+    });
+  }, [referenceDate, utils]);
   const handleChangeMonth = React.useCallback(payload => {
     dispatch(_extends({
       type: 'changeMonth'

package/modern/DigitalClock/DigitalClock.js

@@ -232,10 +232,14 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
+    const result = [];
     const startOfDay = utils.startOfDay(valueOrReferenceDate);
-    return [startOfDay, ...Array.from({
-      length: Math.ceil(24 * 60 / timeStep) - 1
-    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
+    let nextTimeStepOption = startOfDay;
+    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+      result.push(nextTimeStepOption);
+      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+    }
+    return result;
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
@@ -298,7 +302,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
           tabIndex: tabIndex
         }, clockItemProps, {
           children: formattedValue
-        }), formattedValue);
+        }), `${option.valueOf()}-${formattedValue}`);
       })
     })
   }));

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.21.0
+ * @mui/x-date-pickers v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/locales/plPL.js

@@ -16,11 +16,10 @@ const plPLPickers = {
   // DateRange labels
   start: 'Początek',
   end: 'Koniec',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Data rozpoczęcia',
+  startTime: 'Czas rozpoczęcia',
+  endDate: 'Data zakończenia',
+  endTime: 'Czas zakończenia',
   // Action bar
   cancelButtonLabel: 'Anuluj',
   clearButtonLabel: 'Wyczyść',
@@ -46,12 +45,10 @@ const plPLPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils, formattedDate) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Wybierz datę',
   openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Wybierz czas',
-  // fieldClearLabel: 'Clear',
-
+  fieldClearLabel: 'Wyczyść',
   // Table labels
   timeTableLabel: 'wybierz czas',
-  dateTableLabel: 'wybierz datę'
-
+  dateTableLabel: 'wybierz datę',
   // Field section placeholders
   // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
   // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
@@ -63,13 +60,13 @@ const plPLPickers = {
   // fieldMeridiemPlaceholder: () => 'aa',
 
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
+  year: 'Rok',
+  month: 'Miesiąc',
+  day: 'Dzień',
+  weekDay: 'Dzień tygodnia',
+  hours: 'Godzin',
+  minutes: 'Minut',
+  seconds: 'Sekund'
   // meridiem: 'Meridiem',
 
   // Common

package/node/DateCalendar/DayCalendar.js

@@ -386,9 +386,8 @@ function DayCalendar(inProps) {
     return internalFocusedDay;
   }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
-    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
-    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
+    const toDisplay = utils.getWeekArray(currentMonth);
+    let nextMonth = utils.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -400,7 +399,7 @@ function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils, timezone]);
+  }, [currentMonth, fixedWeekNumber, utils]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/node/DateCalendar/useCalendarState.js

@@ -22,6 +22,20 @@ const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayF
         currentMonth: action.newMonth,
         isMonthSwitchingAnimating: !reduceAnimations
       });
+    case 'changeMonthTimezone':
+      {
+        const newTimezone = action.newTimezone;
+        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+          return state;
+        }
+        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
+        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
+          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        }
+        return (0, _extends2.default)({}, state, {
+          currentMonth: newCurrentMonth
+        });
+      }
     case 'finishMonthSwitchingAnimation':
       return (0, _extends2.default)({}, state, {
         isMonthSwitchingAnimating: false
@@ -69,14 +83,25 @@ const useCalendarState = params => {
       referenceDate: referenceDateProp,
       granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day
     });
-  }, [] // eslint-disable-line react-hooks/exhaustive-deps
-  );
+  },
+  // We want the `referenceDate` to update on prop and `timezone` change (https://github.com/mui/mui-x/issues/10804)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [referenceDateProp, timezone]);
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+
+  // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
+  // https://github.com/mui/mui-x/issues/10804
+  React.useEffect(() => {
+    dispatch({
+      type: 'changeMonthTimezone',
+      newTimezone: utils.getTimezone(referenceDate)
+    });
+  }, [referenceDate, utils]);
   const handleChangeMonth = React.useCallback(payload => {
     dispatch((0, _extends2.default)({
       type: 'changeMonth'

package/node/DigitalClock/DigitalClock.js

@@ -239,10 +239,14 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
+    const result = [];
     const startOfDay = utils.startOfDay(valueOrReferenceDate);
-    return [startOfDay, ...Array.from({
-      length: Math.ceil(24 * 60 / timeStep) - 1
-    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
+    let nextTimeStepOption = startOfDay;
+    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+      result.push(nextTimeStepOption);
+      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+    }
+    return result;
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
@@ -305,7 +309,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
           tabIndex: tabIndex
         }, clockItemProps, {
           children: formattedValue
-        }), formattedValue);
+        }), `${option.valueOf()}-${formattedValue}`);
       })
     })
   }));

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.21.0
+ * @mui/x-date-pickers v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/locales/plPL.js

@@ -22,11 +22,10 @@ const plPLPickers = {
   // DateRange labels
   start: 'Początek',
   end: 'Koniec',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Data rozpoczęcia',
+  startTime: 'Czas rozpoczęcia',
+  endDate: 'Data zakończenia',
+  endTime: 'Czas zakończenia',
   // Action bar
   cancelButtonLabel: 'Anuluj',
   clearButtonLabel: 'Wyczyść',
@@ -52,12 +51,10 @@ const plPLPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils, formattedDate) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Wybierz datę',
   openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Wybierz czas',
-  // fieldClearLabel: 'Clear',
-
+  fieldClearLabel: 'Wyczyść',
   // Table labels
   timeTableLabel: 'wybierz czas',
-  dateTableLabel: 'wybierz datę'
-
+  dateTableLabel: 'wybierz datę',
   // Field section placeholders
   // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
   // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
@@ -69,13 +66,13 @@ const plPLPickers = {
   // fieldMeridiemPlaceholder: () => 'aa',
 
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
+  year: 'Rok',
+  month: 'Miesiąc',
+  day: 'Dzień',
+  weekDay: 'Dzień tygodnia',
+  hours: 'Godzin',
+  minutes: 'Minut',
+  seconds: 'Sekund'
   // meridiem: 'Meridiem',
 
   // Common

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.21.0",
+  "version": "7.22.1",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",