@mui/x-date-pickers 7.3.2 → 7.5.0

package/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js

@@ -0,0 +1,332 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/* eslint-disable class-methods-use-this */
+// TODO remove when date-fns-jalali-v3 is the default
+// @ts-nocheck
+import { addSeconds } from 'date-fns-jalali/addSeconds';
+import { addMinutes } from 'date-fns-jalali/addMinutes';
+import { addHours } from 'date-fns-jalali/addHours';
+import { addDays } from 'date-fns-jalali/addDays';
+import { addWeeks } from 'date-fns-jalali/addWeeks';
+import { addMonths } from 'date-fns-jalali/addMonths';
+import { addYears } from 'date-fns-jalali/addYears';
+import { endOfDay } from 'date-fns-jalali/endOfDay';
+import { endOfWeek } from 'date-fns-jalali/endOfWeek';
+import { endOfYear } from 'date-fns-jalali/endOfYear';
+import { format as dateFnsFormat, longFormatters } from 'date-fns-jalali/format';
+import { getHours } from 'date-fns-jalali/getHours';
+import { getSeconds } from 'date-fns-jalali/getSeconds';
+import { getMilliseconds } from 'date-fns-jalali/getMilliseconds';
+import { getWeek } from 'date-fns-jalali/getWeek';
+import { getYear } from 'date-fns-jalali/getYear';
+import { getMonth } from 'date-fns-jalali/getMonth';
+import { getDate } from 'date-fns-jalali/getDate';
+import { getDaysInMonth } from 'date-fns-jalali/getDaysInMonth';
+import { getMinutes } from 'date-fns-jalali/getMinutes';
+import { isAfter } from 'date-fns-jalali/isAfter';
+import { isBefore } from 'date-fns-jalali/isBefore';
+import { isEqual } from 'date-fns-jalali/isEqual';
+import { isSameDay } from 'date-fns-jalali/isSameDay';
+import { isSameYear } from 'date-fns-jalali/isSameYear';
+import { isSameMonth } from 'date-fns-jalali/isSameMonth';
+import { isSameHour } from 'date-fns-jalali/isSameHour';
+import { isValid } from 'date-fns-jalali/isValid';
+import { parse as dateFnsParse } from 'date-fns-jalali/parse';
+import { setDate } from 'date-fns-jalali/setDate';
+import { setHours } from 'date-fns-jalali/setHours';
+import { setMinutes } from 'date-fns-jalali/setMinutes';
+import { setMonth } from 'date-fns-jalali/setMonth';
+import { setSeconds } from 'date-fns-jalali/setSeconds';
+import { setMilliseconds } from 'date-fns-jalali/setMilliseconds';
+import { setYear } from 'date-fns-jalali/setYear';
+import { startOfDay } from 'date-fns-jalali/startOfDay';
+import { startOfMonth } from 'date-fns-jalali/startOfMonth';
+import { endOfMonth } from 'date-fns-jalali/endOfMonth';
+import { startOfWeek } from 'date-fns-jalali/startOfWeek';
+import { startOfYear } from 'date-fns-jalali/startOfYear';
+import { isWithinInterval } from 'date-fns-jalali/isWithinInterval';
+import { faIR as defaultLocale } from 'date-fns-jalali/locale/fa-IR';
+// date-fns-jalali v2 does not export types
+// @ts-ignore TODO remove when date-fns-jalali-v3 is the default
+
+import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+const defaultFormats = {
+  year: 'yyyy',
+  month: 'LLLL',
+  monthShort: 'MMM',
+  dayOfMonth: 'd',
+  dayOfMonthFull: 'do',
+  weekday: 'EEEE',
+  weekdayShort: 'EEEEEE',
+  hours24h: 'HH',
+  hours12h: 'hh',
+  meridiem: 'aa',
+  minutes: 'mm',
+  seconds: 'ss',
+  fullDate: 'PPP',
+  keyboardDate: 'P',
+  shortDate: 'd MMM',
+  normalDate: 'd MMMM',
+  normalDateWithWeekday: 'EEE, d MMMM',
+  fullTime: 'p',
+  fullTime12h: 'hh:mm aaa',
+  fullTime24h: 'HH:mm',
+  keyboardDateTime: 'P p',
+  keyboardDateTime12h: 'P hh:mm aa',
+  keyboardDateTime24h: 'P HH:mm'
+};
+const NUMBER_SYMBOL_MAP = {
+  '1': '۱',
+  '2': '۲',
+  '3': '۳',
+  '4': '۴',
+  '5': '۵',
+  '6': '۶',
+  '7': '۷',
+  '8': '۸',
+  '9': '۹',
+  '0': '۰'
+};
+/**
+ * Based on `@date-io/date-fns-jalali`
+ *
+ * MIT License
+ *
+ * Copyright (c) 2017 Dmitriy Kovalenko
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export class AdapterDateFnsJalali extends AdapterDateFnsBase {
+  constructor({
+    locale,
+    formats
+  } = {}) {
+    if (typeof addDays !== 'function') {
+      throw new Error([`MUI: The \`date-fns-jalali\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
+    }
+    if (!longFormatters) {
+      throw new Error('MUI: The minimum supported `date-fns-jalali` package version compatible with this adapter is `3.2.x`.');
+    }
+    super({
+      locale: locale ?? defaultLocale,
+      // some formats are different in jalali adapter,
+      // this ensures that `AdapterDateFnsBase` formats are overridden
+      formats: _extends({}, defaultFormats, formats),
+      longFormatters,
+      lib: 'date-fns-jalali'
+    });
+    this.parse = (value, format) => {
+      if (value === '') {
+        return null;
+      }
+      return dateFnsParse(value, format, new Date(), {
+        locale: this.locale
+      });
+    };
+    this.getCurrentLocaleCode = () => {
+      return this.locale?.code || 'fa-IR';
+    };
+    this.isValid = value => {
+      if (value == null) {
+        return false;
+      }
+      return isValid(value);
+    };
+    this.format = (value, formatKey) => {
+      return this.formatByString(value, this.formats[formatKey]);
+    };
+    this.formatByString = (value, formatString) => {
+      return dateFnsFormat(value, formatString, {
+        locale: this.locale
+      });
+    };
+    this.formatNumber = numberToFormat => {
+      return numberToFormat.replace(/\d/g, match => NUMBER_SYMBOL_MAP[match]).replace(/,/g, '،');
+    };
+    this.isEqual = (value, comparing) => {
+      if (value === null && comparing === null) {
+        return true;
+      }
+      if (value === null || comparing === null) {
+        return false;
+      }
+      return isEqual(value, comparing);
+    };
+    this.isSameYear = (value, comparing) => {
+      return isSameYear(value, comparing);
+    };
+    this.isSameMonth = (value, comparing) => {
+      return isSameMonth(value, comparing);
+    };
+    this.isSameDay = (value, comparing) => {
+      return isSameDay(value, comparing);
+    };
+    this.isSameHour = (value, comparing) => {
+      return isSameHour(value, comparing);
+    };
+    this.isAfter = (value, comparing) => {
+      return isAfter(value, comparing);
+    };
+    this.isAfterYear = (value, comparing) => {
+      return isAfter(value, this.endOfYear(comparing));
+    };
+    this.isAfterDay = (value, comparing) => {
+      return isAfter(value, this.endOfDay(comparing));
+    };
+    this.isBefore = (value, comparing) => {
+      return isBefore(value, comparing);
+    };
+    this.isBeforeYear = (value, comparing) => {
+      return isBefore(value, this.startOfYear(comparing));
+    };
+    this.isBeforeDay = (value, comparing) => {
+      return isBefore(value, this.startOfDay(comparing));
+    };
+    this.isWithinRange = (value, [start, end]) => {
+      return isWithinInterval(value, {
+        start,
+        end
+      });
+    };
+    this.startOfYear = value => {
+      return startOfYear(value);
+    };
+    this.startOfMonth = value => {
+      return startOfMonth(value);
+    };
+    this.startOfWeek = value => {
+      return startOfWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.startOfDay = value => {
+      return startOfDay(value);
+    };
+    this.endOfYear = value => {
+      return endOfYear(value);
+    };
+    this.endOfMonth = value => {
+      return endOfMonth(value);
+    };
+    this.endOfWeek = value => {
+      return endOfWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.endOfDay = value => {
+      return endOfDay(value);
+    };
+    this.addYears = (value, amount) => {
+      return addYears(value, amount);
+    };
+    this.addMonths = (value, amount) => {
+      return addMonths(value, amount);
+    };
+    this.addWeeks = (value, amount) => {
+      return addWeeks(value, amount);
+    };
+    this.addDays = (value, amount) => {
+      return addDays(value, amount);
+    };
+    this.addHours = (value, amount) => {
+      return addHours(value, amount);
+    };
+    this.addMinutes = (value, amount) => {
+      return addMinutes(value, amount);
+    };
+    this.addSeconds = (value, amount) => {
+      return addSeconds(value, amount);
+    };
+    this.getYear = value => {
+      return getYear(value);
+    };
+    this.getMonth = value => {
+      return getMonth(value);
+    };
+    this.getDate = value => {
+      return getDate(value);
+    };
+    this.getHours = value => {
+      return getHours(value);
+    };
+    this.getMinutes = value => {
+      return getMinutes(value);
+    };
+    this.getSeconds = value => {
+      return getSeconds(value);
+    };
+    this.getMilliseconds = value => {
+      return getMilliseconds(value);
+    };
+    this.setYear = (value, year) => {
+      return setYear(value, year);
+    };
+    this.setMonth = (value, month) => {
+      return setMonth(value, month);
+    };
+    this.setDate = (value, date) => {
+      return setDate(value, date);
+    };
+    this.setHours = (value, hours) => {
+      return setHours(value, hours);
+    };
+    this.setMinutes = (value, minutes) => {
+      return setMinutes(value, minutes);
+    };
+    this.setSeconds = (value, seconds) => {
+      return setSeconds(value, seconds);
+    };
+    this.setMilliseconds = (value, milliseconds) => {
+      return setMilliseconds(value, milliseconds);
+    };
+    this.getDaysInMonth = value => {
+      return getDaysInMonth(value);
+    };
+    this.getWeekArray = value => {
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
+      let count = 0;
+      let current = start;
+      const nestedWeeks = [];
+      while (this.isBefore(current, end)) {
+        const weekNumber = Math.floor(count / 7);
+        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+        nestedWeeks[weekNumber].push(current);
+        current = this.addDays(current, 1);
+        count += 1;
+      }
+      return nestedWeeks;
+    };
+    this.getWeekNumber = date => {
+      return getWeek(date, {
+        locale: this.locale
+      });
+    };
+    this.getYearRange = ([start, end]) => {
+      const startDate = this.startOfYear(start);
+      const endDate = this.endOfYear(end);
+      const years = [];
+      let current = startDate;
+      while (this.isBefore(current, endDate)) {
+        years.push(current);
+        current = this.addYears(current, 1);
+      }
+      return years;
+    };
+  }
+}

package/AdapterDateFnsJalaliV3/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDateFnsJalali } from './AdapterDateFnsJalaliV3';

package/AdapterDateFnsJalaliV3/index.js

@@ -0,0 +1 @@
+export { AdapterDateFnsJalali } from './AdapterDateFnsJalaliV3';

package/AdapterDateFnsJalaliV3/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/AdapterDateFnsJalaliV3/index.js",
+  "types": "./index.d.ts"
+}

package/AdapterDateFnsV3/AdapterDateFnsV3.d.ts

@@ -1,6 +1,11 @@
 import { Locale as DateFnsLocale } from 'date-fns/locale/types';
 import { AdapterFormats, AdapterOptions, MuiPickersAdapter } from '../models';
 import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+declare module '@mui/x-date-pickers/models' {
+    interface PickerValidDateLookup {
+        'date-fns': Date;
+    }
+}
 /**
  * Based on `@date-io/date-fns`
  *

package/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -49,7 +49,6 @@ import { enUS } from 'date-fns/locale/en-US';
 // @ts-ignore TODO remove when date-fns-v3 is the default
 
 import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
-
 /**
  * Based on `@date-io/date-fns`
  *

package/AdapterMomentJalaali/AdapterMomentJalaali.js

@@ -163,14 +163,10 @@ export class AdapterMomentJalaali extends AdapterMoment {
       return numberToFormat.replace(/\d/g, match => NUMBER_SYMBOL_MAP[match]).replace(/,/g, '،');
     };
     this.isSameYear = (value, comparing) => {
-      // `isSame` seems to mutate the date on `moment-jalaali`
-      // @ts-ignore
-      return value.clone().isSame(comparing, 'jYear');
+      return value.jYear() === comparing.jYear();
     };
     this.isSameMonth = (value, comparing) => {
-      // `isSame` seems to mutate the date on `moment-jalaali`
-      // @ts-ignore
-      return value.clone().isSame(comparing, 'jMonth');
+      return value.jYear() === comparing.jYear() && value.jMonth() === comparing.jMonth();
     };
     this.isAfterYear = (value, comparing) => {
       return value.jYear() > comparing.jYear();

package/CHANGELOG.md

@@ -3,6 +3,144 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.5.0
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add support for checkbox selection on the Tree View components
+- 🌍 Improve Norwegian (nb-NO) and Spanish (es-ES) locales on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.5.0`
+
+- [DataGrid] Fix `rowModesModel` controlled prop (#13056) @Janpot
+- [DataGrid] Reduce bundle size with error messages (#12992) @oliviertassinari
+- [l10n] Improve Norwegian (nb-NO) locale (#13106) @oliverlaidma
+- [l10n] Improve Spanish (es-ES) locale (#13133) @Jucabel
+
+#### `@mui/x-data-grid-pro@7.5.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.5.0`.
+
+#### `@mui/x-data-grid-premium@7.5.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.5.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.5.0`
+
+- [fields] Allow empty `textField` slot placeholder value (#13148) @arthurbalduini
+- [pickers] Fix `AdapterMomentJalaali` regression (#13144) @LukasTy
+- [pickers] Fix field focusing when switching to view without a renderer (#13112) @LukasTy
+- [pickers] Reuse `AdapterDateFnsBase` in Jalali adapters (#13075) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.5.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.5.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.5.0`
+
+- [charts] Tooltip with `trigger=axis` now follow touch on mobile (#13043) @wzdorowa
+- [charts] Allow `series.label` property to receive a function with the "location" it is going to be displayed on (#12830) @JCQuintas
+- [charts] Improve TypeScript performance (#13137) @alexfauquette
+- [charts] Fix area order when overlapping (#13121) @alexfauquette
+- [charts] Improve `useSlotProps` types (#13141) @alexfauquette
+- [charts] Fix using the theme's font in the Overlay (#13107) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.5.0`
+
+- [TreeView] Add support for checkbox selection (#11452) @flaviendelangle
+- [TreeView] Remove unused code (#12917) @flaviendelangle
+
+### Docs
+
+- [docs] Document missing Charts API's (#12875) @alexfauquette
+
+### Core
+
+- [core] Avoid root level `@mui/x-date-pickers` imports (#13120) @LukasTy
+- [core] Refactor ESLint config to disallow root level imports (#13130) @LukasTy
+- [core] Simplify Danger's config (#13062) @oliviertassinari
+- [core] Shift aliasing from babel to webpack (#13051) @Janpot
+- [core] Reuse the `SectionTitle` component in the doc (#13139) @alexfauquette
+
+## 7.4.0
+
+_May 10, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add optional `id` attribute on shortcut items of the Date and Time Pickers
+- 🎁 Add support for `date-fns-jalali` v3 in the Date and Time Pickers
+- 🚀 Support rounded corners on `BarChart`
+- 🌍 Add accessibility page to TreeView docs
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.4.0`
+
+- [DataGrid] Fix error when focus moves from column header to `svg` element (#13028) @oukunan
+- [DataGrid] Fix error on column groups change (#12965) @romgrk
+
+#### `@mui/x-data-grid-pro@7.4.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.4.0`.
+
+#### `@mui/x-data-grid-premium@7.4.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.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.4.0`
+
+- [fields] Fix regression preventing form submit on "Enter" click (#13065) @LukasTy
+- [pickers] Add `AdapterDateFnsJalaliV3` adapter (#12891) @smmoosavi
+- [pickers] Add optional `id` attribute on shortcut items (#12976) @noraleonte
+
+#### `@mui/x-date-pickers-pro@7.4.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.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.4.0`
+
+- [charts] Add `ChartsGrid` to `themeAugmentation` (#13026) @noraleonte
+- [charts] Support rounded corners on `BarChart` (#12834) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.4.0`
+
+- [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle
+
+### Docs
+
+- [docs] Add accessibility page to TreeView docs (#12845) @noraleonte
+- [docs] Fix Charts styling typos (#13061) @oliviertassinari
+- [docs] Fix legal link to EULA free trial (#13013) @oliviertassinari
+- [docs] Update interface name in pinned columns docs (#13070) @cherniavskii
+
+### Core
+
+- [core] Improve release process docs (#12977) @JCQuintas
+- [core] Prepare React 19 (#12991) @oliviertassinari
+- [docs-infra] Fix Netlify PR preview path (#12993) @oliviertassinari
+- [infra] Automation: Add release PR reviewers (#12982) @michelengelen
+
 ## 7.3.2
 
 _May 2, 2024_
@@ -17,8 +155,6 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - 🐞 Bugfixes
 - 📚 Documentation improvements
 
-<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
-
 ### Data Grid
 
 #### `@mui/x-data-grid@7.3.2`
@@ -3281,6 +3417,28 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.12
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.12`
+
+- [pickers] Fix `AdapterMomentJalaali` regression (#13150) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.12` [![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@6.19.12`.
+
+### Docs
+
+- [docs] Use MUI X v6 in Codesandbox and Stackblitz demos (#12838) @cherniavskii
+
 ## 6.19.11
 
 _Apr 18, 2024_

package/DateCalendar/DateCalendar.js

@@ -198,9 +198,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       disableFuture,
       reduceAnimations,
       timezone,
-      labelId: gridLabelId,
-      slots,
-      slotProps
+      labelId: gridLabelId
     },
     ownerState: props
   });
@@ -294,7 +292,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
+    children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
       transKey: view,

package/PickersLayout/usePickerLayout.js

@@ -63,9 +63,9 @@ const usePickerLayout = props => {
       onClear,
       onCancel,
       onSetToday,
-      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept'],
-      className: classes.actionBar
+      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
     },
+    className: classes.actionBar,
     ownerState: _extends({}, props, {
       wrapperVariant
     })
@@ -86,9 +86,9 @@ const usePickerLayout = props => {
       onViewChange,
       views,
       disabled,
-      readOnly,
-      className: classes.toolbar
+      readOnly
     },
+    className: classes.toolbar,
     ownerState: _extends({}, props, {
       wrapperVariant
     })
@@ -117,14 +117,13 @@ const usePickerLayout = props => {
     additionalProps: {
       isValid,
       isLandscape,
-      onChange: onSelectShortcut,
-      className: classes.shortcuts
+      onChange: onSelectShortcut
     },
+    className: classes.shortcuts,
     ownerState: {
       isValid,
       isLandscape,
       onChange: onSelectShortcut,
-      className: classes.shortcuts,
       wrapperVariant
     }
   });

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -6,6 +6,11 @@ interface PickersShortcutsItemGetValueParams<TValue> {
 export interface PickersShortcutsItem<TValue> {
     label: string;
     getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
+    /**
+     * Identifier of the shortcut.
+     * If provided, it will be used as the key of the shortcut.
+     */
+    id?: string;
 }
 export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<unknown>, 'getValue'>;
 export type PickerShortcutChangeImportance = 'set' | 'accept';

package/PickersShortcuts/PickersShortcuts.js

@@ -37,13 +37,13 @@ function PickersShortcuts(props) {
     const newValue = getValue({
       isValid
     });
-    return {
+    return _extends({}, item, {
       label: item.label,
       onClick: () => {
         onChange(newValue, changeImportance, item);
       },
       disabled: !isValid(newValue)
-    };
+    });
   });
   return /*#__PURE__*/_jsx(List, _extends({
     dense: true,
@@ -56,7 +56,7 @@ function PickersShortcuts(props) {
     children: resolvedItems.map(item => {
       return /*#__PURE__*/_jsx(ListItem, {
         children: /*#__PURE__*/_jsx(Chip, _extends({}, item))
-      }, item.label);
+      }, item.id ?? item.label);
     })
   }));
 }
@@ -95,6 +95,7 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    */
   items: PropTypes.arrayOf(PropTypes.shape({
     getValue: PropTypes.func.isRequired,
+    id: PropTypes.string,
     label: PropTypes.string.isRequired
   })),
   onChange: PropTypes.func.isRequired,

package/index.js

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