@mui/x-date-pickers 7.21.0 → 7.22.0

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

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