@mui/x-date-pickers 7.1.1 → 7.2.0

package/CHANGELOG.md

@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.2.0
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Make grid colors customizable through the MUI themes API
+- 🌍 Improve French (fr-FR), German (de-DE), and Swedish (sv-SE) locales on the Data Grid and Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.2.0`
+
+- [DataGrid] Add missing `api` property to `GridCallbackDetails` (#12742) @sai6855
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12722) @cherniavskii
+- [DataGrid] Fix column vertical border (#12741) @romgrk
+- [DataGrid] Fix invalid date error when filtering `date`/`dateTime` columns (#12709) @cherniavskii
+- [DataGrid] Fix overflow with dynamic row height (#12683) @romgrk
+- [DataGrid] Make colors customizable (#12614) @romgrk
+- [l10n] Improve French (fr-FR) locale (#12755) @derek-0000
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+
+#### `@mui/x-data-grid-pro@7.2.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.2.0`.
+
+#### `@mui/x-data-grid-premium@7.2.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.2.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working when cell loses focus (#12724) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.2.0`
+
+- [fields] Fix field editing after closing the picker (#12675) @LukasTy
+- [l10n] Improve French (fr-FR) locale (#12692) @FaroukBel
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+- [pickers] Fix desktop date time Pickers grid layout (#12748) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.2.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.2.0`, plus:
+
+- [DateTimeRangePicker] Fix desktop toolbar style (#12760) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.2.0`
+
+- [charts] Fix Bar chart with empty dataset throwing an error (#12708) @JCQuintas
+- [charts] Fix `tickLabelInterval` not working on `YAxis` (#12746) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.2.0`
+
+- [TreeView] Add a new lookup to access an item index without expansive computation (#12729) @flaviendelangle
+- [TreeView] Clean up usage of term "node" in internals (#12655) @noraleonte
+- [TreeView] Improve performance by removing `getNavigableChildrenIds` method (#12713) @flaviendelangle
+- [TreeView] Remove `state.items.itemTree` (#12717) @flaviendelangle
+- [TreeView] Remove remaining occurences of the word "node" in the codebase (#12712) @flaviendelangle
+- [TreeView] Return `instance` and `publicAPI` methods from plugin and populate the main objects inside `useTreeView` (#12650) @flaviendelangle
+- [TreeView] Fix behaviors when the item order changes (#12369) @flaviendelangle
+
+### Docs
+
+- [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas
+- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte
+- [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle
+- [docs] Explain how to clip plots with composition (#12679) @alexfauquette
+- [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96
+- [docs] Fix typo in Pickers v7 migration page (#12721) @bfaulk96
+
+### Core
+
+- [core] Support multiple resolved `l10n` PR packages (#12735) @LukasTy
+- [core] Update Netlify release references in release README (#12687) @LukasTy
+- [core] Use `describeTreeView` for icons tests (#12672) @flaviendelangle
+- [core] Use `describeTreeView` in existing tests for `useTreeViewItems` (#12732) @flaviendelangle
+
 ## 7.1.1
 
 _Apr 5, 2024_

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -46,15 +46,24 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.(_extends({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
       focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
-      views: rendererProps.views.filter(isDatePickerView)
+      views: rendererProps.views.filter(isDatePickerView),
+      sx: [{
+        gridColumn: 1
+      }, ...finalProps.sx]
     })), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(Divider, {
-        orientation: "vertical"
+        orientation: "vertical",
+        sx: {
+          gridColumn: 2
+        }
       }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.(_extends({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
         focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
         openTo: isInternalTimeView(openTo) ? openTo : 'hours',
-        views: rendererProps.views.filter(isInternalTimeView)
+        views: rendererProps.views.filter(isInternalTimeView),
+        sx: [{
+          gridColumn: 3
+        }, ...finalProps.sx]
       }))]
     })]
   });

package/index.js

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

package/internals/hooks/usePicker/usePickerValue.js

@@ -270,8 +270,14 @@ export const usePickerValue = ({
       pickerAction: 'today'
     });
   });
-  const handleOpen = useEventCallback(() => setIsOpen(true));
-  const handleClose = useEventCallback(() => setIsOpen(false));
+  const handleOpen = useEventCallback(event => {
+    event.preventDefault();
+    setIsOpen(true);
+  });
+  const handleClose = useEventCallback(event => {
+    event?.preventDefault();
+    setIsOpen(false);
+  });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
     value: newValue,

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { InferError, Validator } from '../useValidation';
 import { UseFieldValidationProps } from '../useField/useField.types';
@@ -249,8 +250,8 @@ export interface UsePickerValueActions {
     onDismiss: () => void;
     onCancel: () => void;
     onSetToday: () => void;
-    onOpen: () => void;
-    onClose: () => void;
+    onOpen: (event: React.UIEvent) => void;
+    onClose: (event?: React.UIEvent) => void;
 }
 export type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, PickerValidDate, TSection, any, TError>, 'value' | 'onChange'>>;
 /**
@@ -260,7 +261,7 @@ export interface UsePickerValueViewsResponse<TValue> {
     value: TValue;
     onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
     open: boolean;
-    onClose: () => void;
+    onClose: (event?: React.MouseEvent) => void;
 }
 /**
  * Props passed to `usePickerLayoutProps`.

package/locales/deDE.js

@@ -17,11 +17,10 @@ const deDEPickers = {
   // DateRange labels
   start: 'Beginn',
   end: 'Ende',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdatum',
+  startTime: 'Startzeit',
+  endDate: 'Enddatum',
+  endTime: 'Endzeit',
   // Action bar
   cancelButtonLabel: 'Abbrechen',
   clearButtonLabel: 'Löschen',
@@ -59,19 +58,17 @@ const deDEPickers = {
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Jahr',
+  month: 'Monat',
+  day: 'Tag',
+  weekDay: 'Wochentag',
+  hours: 'Stunden',
+  minutes: 'Minuten',
+  seconds: 'Sekunden',
+  meridiem: 'Tageszeit',
   // Common
-  // empty: 'Empty',
+  empty: 'Leer'
 };
 export const deDE = getPickersLocalization(deDEPickers);

package/locales/frFR.js

@@ -16,11 +16,10 @@ const frFRPickers = {
   // DateRange labels
   start: 'Début',
   end: 'Fin',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Date de début',
+  startTime: 'Heure de début',
+  endDate: 'Date de fin',
+  endTime: 'Heure de fin',
   // Action bar
   cancelButtonLabel: 'Annuler',
   clearButtonLabel: 'Vider',
@@ -46,8 +45,7 @@ const frFRPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${utils.format(value, 'fullDate')}` : 'Choisir la date',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure",
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Effacer la valeur',
   // Table labels
   timeTableLabel: "choix de l'heure",
   dateTableLabel: 'choix de la date',
@@ -55,23 +53,21 @@ const frFRPickers = {
   fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'JJ',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Année',
+  month: 'Mois',
+  day: 'Jour',
+  weekDay: 'Jour de la semaine',
+  hours: 'Heures',
+  minutes: 'Minutes',
+  seconds: 'Secondes',
+  meridiem: 'Méridien',
   // Common
-  // empty: 'Empty',
+  empty: 'Vider'
 };
 export const frFR = getPickersLocalization(frFRPickers);

package/locales/svSE.js

@@ -16,11 +16,10 @@ const svSEPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Slut',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdatum',
+  startTime: 'Starttid',
+  endDate: 'Slutdatum',
+  endTime: 'Sluttid',
   // Action bar
   cancelButtonLabel: 'Avbryt',
   clearButtonLabel: 'Rensa',
@@ -46,33 +45,29 @@ const svSEPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Rensa värde',
   // Table labels
   timeTableLabel: 'välj tid',
-  dateTableLabel: 'välj datum'
-
+  dateTableLabel: 'välj datum',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
-
+  fieldYearPlaceholder: params => 'Å'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'tt',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'År',
+  month: 'Månad',
+  day: 'Dag',
+  weekDay: 'Veckodag',
+  hours: 'Timmar',
+  minutes: 'Minuter',
+  seconds: 'Sekunder',
+  meridiem: 'Meridiem',
   // Common
-  // empty: 'Empty',
+  empty: 'Tom'
 };
 export const svSE = getPickersLocalization(svSEPickers);

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -46,15 +46,24 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.(_extends({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
       focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
-      views: rendererProps.views.filter(isDatePickerView)
+      views: rendererProps.views.filter(isDatePickerView),
+      sx: [{
+        gridColumn: 1
+      }, ...finalProps.sx]
     })), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(Divider, {
-        orientation: "vertical"
+        orientation: "vertical",
+        sx: {
+          gridColumn: 2
+        }
       }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.(_extends({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
         focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
         openTo: isInternalTimeView(openTo) ? openTo : 'hours',
-        views: rendererProps.views.filter(isInternalTimeView)
+        views: rendererProps.views.filter(isInternalTimeView),
+        sx: [{
+          gridColumn: 3
+        }, ...finalProps.sx]
       }))]
     })]
   });

package/modern/index.js

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

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -270,8 +270,14 @@ export const usePickerValue = ({
       pickerAction: 'today'
     });
   });
-  const handleOpen = useEventCallback(() => setIsOpen(true));
-  const handleClose = useEventCallback(() => setIsOpen(false));
+  const handleOpen = useEventCallback(event => {
+    event.preventDefault();
+    setIsOpen(true);
+  });
+  const handleClose = useEventCallback(event => {
+    event?.preventDefault();
+    setIsOpen(false);
+  });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
     value: newValue,

package/modern/locales/deDE.js

@@ -17,11 +17,10 @@ const deDEPickers = {
   // DateRange labels
   start: 'Beginn',
   end: 'Ende',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdatum',
+  startTime: 'Startzeit',
+  endDate: 'Enddatum',
+  endTime: 'Endzeit',
   // Action bar
   cancelButtonLabel: 'Abbrechen',
   clearButtonLabel: 'Löschen',
@@ -59,19 +58,17 @@ const deDEPickers = {
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Jahr',
+  month: 'Monat',
+  day: 'Tag',
+  weekDay: 'Wochentag',
+  hours: 'Stunden',
+  minutes: 'Minuten',
+  seconds: 'Sekunden',
+  meridiem: 'Tageszeit',
   // Common
-  // empty: 'Empty',
+  empty: 'Leer'
 };
 export const deDE = getPickersLocalization(deDEPickers);

package/modern/locales/frFR.js

@@ -16,11 +16,10 @@ const frFRPickers = {
   // DateRange labels
   start: 'Début',
   end: 'Fin',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Date de début',
+  startTime: 'Heure de début',
+  endDate: 'Date de fin',
+  endTime: 'Heure de fin',
   // Action bar
   cancelButtonLabel: 'Annuler',
   clearButtonLabel: 'Vider',
@@ -46,8 +45,7 @@ const frFRPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${utils.format(value, 'fullDate')}` : 'Choisir la date',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure",
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Effacer la valeur',
   // Table labels
   timeTableLabel: "choix de l'heure",
   dateTableLabel: 'choix de la date',
@@ -55,23 +53,21 @@ const frFRPickers = {
   fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'JJ',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Année',
+  month: 'Mois',
+  day: 'Jour',
+  weekDay: 'Jour de la semaine',
+  hours: 'Heures',
+  minutes: 'Minutes',
+  seconds: 'Secondes',
+  meridiem: 'Méridien',
   // Common
-  // empty: 'Empty',
+  empty: 'Vider'
 };
 export const frFR = getPickersLocalization(frFRPickers);

package/modern/locales/svSE.js

@@ -16,11 +16,10 @@ const svSEPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Slut',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdatum',
+  startTime: 'Starttid',
+  endDate: 'Slutdatum',
+  endTime: 'Sluttid',
   // Action bar
   cancelButtonLabel: 'Avbryt',
   clearButtonLabel: 'Rensa',
@@ -46,33 +45,29 @@ const svSEPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Rensa värde',
   // Table labels
   timeTableLabel: 'välj tid',
-  dateTableLabel: 'välj datum'
-
+  dateTableLabel: 'välj datum',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
-
+  fieldYearPlaceholder: params => 'Å'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'tt',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'År',
+  month: 'Månad',
+  day: 'Dag',
+  weekDay: 'Veckodag',
+  hours: 'Timmar',
+  minutes: 'Minuter',
+  seconds: 'Sekunder',
+  meridiem: 'Meridiem',
   // Common
-  // empty: 'Empty',
+  empty: 'Tom'
 };
 export const svSE = getPickersLocalization(svSEPickers);

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -54,15 +54,24 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.((0, _extends2.default)({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
       focusedView: focusedView && (0, _internals.isDatePickerView)(focusedView) ? focusedView : null,
-      views: rendererProps.views.filter(_internals.isDatePickerView)
+      views: rendererProps.views.filter(_internals.isDatePickerView),
+      sx: [{
+        gridColumn: 1
+      }, ...finalProps.sx]
     })), timeViewsCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        orientation: "vertical"
+        orientation: "vertical",
+        sx: {
+          gridColumn: 2
+        }
       }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.((0, _extends2.default)({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
         focusedView: focusedView && (0, _internals.isInternalTimeView)(focusedView) ? focusedView : null,
         openTo: (0, _internals.isInternalTimeView)(openTo) ? openTo : 'hours',
-        views: rendererProps.views.filter(_internals.isInternalTimeView)
+        views: rendererProps.views.filter(_internals.isInternalTimeView),
+        sx: [{
+          gridColumn: 3
+        }, ...finalProps.sx]
       }))]
     })]
   });

package/node/index.js

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

package/node/internals/hooks/usePicker/usePickerValue.js

@@ -278,8 +278,14 @@ const usePickerValue = ({
       pickerAction: 'today'
     });
   });
-  const handleOpen = (0, _useEventCallback.default)(() => setIsOpen(true));
-  const handleClose = (0, _useEventCallback.default)(() => setIsOpen(false));
+  const handleOpen = (0, _useEventCallback.default)(event => {
+    event.preventDefault();
+    setIsOpen(true);
+  });
+  const handleClose = (0, _useEventCallback.default)(event => {
+    event?.preventDefault();
+    setIsOpen(false);
+  });
   const handleChange = (0, _useEventCallback.default)((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
     value: newValue,

package/node/locales/deDE.js

@@ -23,11 +23,10 @@ const deDEPickers = {
   // DateRange labels
   start: 'Beginn',
   end: 'Ende',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdatum',
+  startTime: 'Startzeit',
+  endDate: 'Enddatum',
+  endTime: 'Endzeit',
   // Action bar
   cancelButtonLabel: 'Abbrechen',
   clearButtonLabel: 'Löschen',
@@ -65,19 +64,17 @@ const deDEPickers = {
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Jahr',
+  month: 'Monat',
+  day: 'Tag',
+  weekDay: 'Wochentag',
+  hours: 'Stunden',
+  minutes: 'Minuten',
+  seconds: 'Sekunden',
+  meridiem: 'Tageszeit',
   // Common
-  // empty: 'Empty',
+  empty: 'Leer'
 };
 const deDE = exports.deDE = (0, _getPickersLocalization.getPickersLocalization)(deDEPickers);

package/node/locales/frFR.js

@@ -22,11 +22,10 @@ const frFRPickers = {
   // DateRange labels
   start: 'Début',
   end: 'Fin',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Date de début',
+  startTime: 'Heure de début',
+  endDate: 'Date de fin',
+  endTime: 'Heure de fin',
   // Action bar
   cancelButtonLabel: 'Annuler',
   clearButtonLabel: 'Vider',
@@ -52,8 +51,7 @@ const frFRPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${utils.format(value, 'fullDate')}` : 'Choisir la date',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure",
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Effacer la valeur',
   // Table labels
   timeTableLabel: "choix de l'heure",
   dateTableLabel: 'choix de la date',
@@ -61,23 +59,21 @@ const frFRPickers = {
   fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'JJ',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Année',
+  month: 'Mois',
+  day: 'Jour',
+  weekDay: 'Jour de la semaine',
+  hours: 'Heures',
+  minutes: 'Minutes',
+  seconds: 'Secondes',
+  meridiem: 'Méridien',
   // Common
-  // empty: 'Empty',
+  empty: 'Vider'
 };
 const frFR = exports.frFR = (0, _getPickersLocalization.getPickersLocalization)(frFRPickers);

package/node/locales/svSE.js

@@ -22,11 +22,10 @@ const svSEPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Slut',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdatum',
+  startTime: 'Starttid',
+  endDate: 'Slutdatum',
+  endTime: 'Sluttid',
   // Action bar
   cancelButtonLabel: 'Avbryt',
   clearButtonLabel: 'Rensa',
@@ -52,33 +51,29 @@ const svSEPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Rensa värde',
   // Table labels
   timeTableLabel: 'välj tid',
-  dateTableLabel: 'välj datum'
-
+  dateTableLabel: 'välj datum',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
-
+  fieldYearPlaceholder: params => 'Å'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'tt',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'År',
+  month: 'Månad',
+  day: 'Dag',
+  weekDay: 'Veckodag',
+  hours: 'Timmar',
+  minutes: 'Minuter',
+  seconds: 'Sekunder',
+  meridiem: 'Meridiem',
   // Common
-  // empty: 'Empty',
+  empty: 'Tom'
 };
 const svSE = exports.svSE = (0, _getPickersLocalization.getPickersLocalization)(svSEPickers);

package/package.json

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