@mui/x-date-pickers 6.18.2 → 6.18.4

package/modern/internals/hooks/useField/useField.utils.js

@@ -207,49 +207,62 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
   }
   return newSections;
 };
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, currentTokenValue) => {
+const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.dateWithTimezone(undefined, timezone), currentTokenValue).length
+          digitAmount: utils.formatByString(utils.dateWithTimezone(undefined, timezone), sectionFormat).length,
+          format: sectionFormat
         });
       }
     case 'month':
       {
         return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
         });
       }
     case 'day':
       {
-        return localeText.fieldDayPlaceholder();
+        return localeText.fieldDayPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'weekDay':
       {
         return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
         });
       }
     case 'hours':
       {
-        return localeText.fieldHoursPlaceholder();
+        return localeText.fieldHoursPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'minutes':
       {
-        return localeText.fieldMinutesPlaceholder();
+        return localeText.fieldMinutesPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'seconds':
       {
-        return localeText.fieldSecondsPlaceholder();
+        return localeText.fieldSecondsPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'meridiem':
       {
-        return localeText.fieldMeridiemPlaceholder();
+        return localeText.fieldMeridiemPlaceholder({
+          format: sectionFormat
+        });
       }
     default:
       {
-        return currentTokenValue;
+        return sectionFormat;
       }
   }
 };

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -263,6 +263,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
             },
             items: (0, _MultiSectionDigitalClock.getTimeSectionOptions)({
               value: utils.getMinutes(valueOrReferenceDate),
+              utils,
               isDisabled: minutes => disabled || isTimeDisabled(minutes, 'minutes'),
               resolveLabel: minutes => utils.format(utils.setMinutes(now, minutes), 'minutes'),
               timeStep: timeSteps.minutes,
@@ -279,6 +280,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
             },
             items: (0, _MultiSectionDigitalClock.getTimeSectionOptions)({
               value: utils.getSeconds(valueOrReferenceDate),
+              utils,
               isDisabled: seconds => disabled || isTimeDisabled(seconds, 'seconds'),
               resolveLabel: seconds => utils.format(utils.setSeconds(now, seconds), 'seconds'),
               timeStep: timeSteps.seconds,

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -45,6 +45,7 @@ const getHourSectionOptions = ({
 exports.getHourSectionOptions = getHourSectionOptions;
 const getTimeSectionOptions = ({
   value,
+  utils,
   isDisabled,
   timeStep,
   resolveLabel,
@@ -63,7 +64,7 @@ const getTimeSectionOptions = ({
     const timeValue = timeStep * index;
     return {
       value: timeValue,
-      label: resolveLabel(timeValue),
+      label: utils.formatNumber(resolveLabel(timeValue)),
       isDisabled,
       isSelected,
       ariaLabel: resolveAriaLabel(timeValue.toString())

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -45,7 +45,12 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
   },
-  '&:hover': {
+  '@media (pointer: fine)': {
+    '&:hover': {
+      overflowY: 'auto'
+    }
+  },
+  '@media (pointer: none), (pointer: coarse)': {
     overflowY: 'auto'
   },
   '&:not(:first-of-type)': {
@@ -158,7 +163,8 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        className: classes.item
       }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/node/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -9,6 +9,6 @@ exports.multiSectionDigitalClockSectionClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiMultiSectionDigitalClock', slot);
+  return (0, _generateUtilityClass.default)('MuiMultiSectionDigitalClockSection', slot);
 }
-const multiSectionDigitalClockSectionClasses = exports.multiSectionDigitalClockSectionClasses = (0, _generateUtilityClasses.default)('MuiMultiSectionDigitalClock', ['root', 'item']);
+const multiSectionDigitalClockSectionClasses = exports.multiSectionDigitalClockSectionClasses = (0, _generateUtilityClasses.default)('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/node/index.js

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

package/node/internals/hooks/useField/useField.utils.js

@@ -223,49 +223,62 @@ const addPositionPropertiesToSections = (sections, isRTL) => {
   return newSections;
 };
 exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, currentTokenValue) => {
+const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.dateWithTimezone(undefined, timezone), currentTokenValue).length
+          digitAmount: utils.formatByString(utils.dateWithTimezone(undefined, timezone), sectionFormat).length,
+          format: sectionFormat
         });
       }
     case 'month':
       {
         return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
         });
       }
     case 'day':
       {
-        return localeText.fieldDayPlaceholder();
+        return localeText.fieldDayPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'weekDay':
       {
         return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
         });
       }
     case 'hours':
       {
-        return localeText.fieldHoursPlaceholder();
+        return localeText.fieldHoursPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'minutes':
       {
-        return localeText.fieldMinutesPlaceholder();
+        return localeText.fieldMinutesPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'seconds':
       {
-        return localeText.fieldSecondsPlaceholder();
+        return localeText.fieldSecondsPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'meridiem':
       {
-        return localeText.fieldMeridiemPlaceholder();
+        return localeText.fieldMeridiemPlaceholder({
+          format: sectionFormat
+        });
       }
     default:
       {
-        return currentTokenValue;
+        return sectionFormat;
       }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.18.2",
+  "version": "6.18.4",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",