@mui/x-date-pickers 7.9.0 → 7.11.0

package/node/TimeClock/Clock.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Clock = Clock;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -22,7 +23,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    meridiemMode
   } = ownerState;
   const slots = {
     root: ['root'],
@@ -30,8 +32,8 @@ const useUtilityClasses = ownerState => {
     wrapper: ['wrapper'],
     squareMask: ['squareMask'],
     pin: ['pin'],
-    amButton: ['amButton'],
-    pmButton: ['pmButton'],
+    amButton: ['amButton', meridiemMode === 'am' && 'selected'],
+    pmButton: ['pmButton', meridiemMode === 'pm' && 'selected'],
     meridiemText: ['meridiemText']
   };
   return (0, _utils.unstable_composeClasses)(slots, _clockClasses.getClockUtilityClass, classes);
@@ -114,23 +116,15 @@ const ClockPin = (0, _styles.styled)('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
-  name: 'MuiClock',
-  slot: 'AmButton',
-  overridesResolver: (_, styles) => styles.amButton
-})(({
-  theme
-}) => ({
+const meridiemButtonCommonStyles = (theme, meridiemMode) => ({
   zIndex: 1,
-  position: 'absolute',
   bottom: 8,
-  left: 8,
   paddingLeft: 4,
   paddingRight: 4,
   width: _shared.CLOCK_HOUR_WIDTH,
   variants: [{
     props: {
-      meridiemMode: 'am'
+      meridiemMode
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -140,6 +134,17 @@ const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
       }
     }
   }]
+});
+const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
+  name: 'MuiClock',
+  slot: 'AmButton',
+  overridesResolver: (_, styles) => styles.amButton
+})(({
+  theme
+}) => (0, _extends2.default)({}, meridiemButtonCommonStyles(theme, 'am'), {
+  // keeping it here to make TS happy
+  position: 'absolute',
+  left: 8
 }));
 const ClockPmButton = (0, _styles.styled)(_IconButton.default, {
   name: 'MuiClock',
@@ -147,26 +152,10 @@ const ClockPmButton = (0, _styles.styled)(_IconButton.default, {
   overridesResolver: (_, styles) => styles.pmButton
 })(({
   theme
-}) => ({
-  zIndex: 1,
+}) => (0, _extends2.default)({}, meridiemButtonCommonStyles(theme, 'pm'), {
+  // keeping it here to make TS happy
   position: 'absolute',
-  bottom: 8,
-  right: 8,
-  paddingLeft: 4,
-  paddingRight: 4,
-  width: _shared.CLOCK_HOUR_WIDTH,
-  variants: [{
-    props: {
-      meridiemMode: 'pm'
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette.primary.main,
-      color: (theme.vars || theme).palette.primary.contrastText,
-      '&:hover': {
-        backgroundColor: (theme.vars || theme).palette.primary.light
-      }
-    }
-  }]
+  right: 8
 }));
 const ClockMeridiemText = (0, _styles.styled)(_Typography.default, {
   name: 'MuiClock',

package/node/TimeClock/clockClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getClockUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiClock', slot);
 }
-const clockClasses = exports.clockClasses = (0, _utils.unstable_generateUtilityClasses)('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton', 'meridiemText']);
+const clockClasses = exports.clockClasses = (0, _utils.unstable_generateUtilityClasses)('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton', 'meridiemText', 'selected']);

package/node/index.js

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

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -60,7 +60,11 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
-    button: ['button']
+    button: ['button'],
+    previousIconButton: ['previousIconButton'],
+    nextIconButton: ['nextIconButton'],
+    leftArrowIcon: ['leftArrowIcon'],
+    rightArrowIcon: ['rightArrowIcon']
   };
   return (0, _utils.unstable_composeClasses)(slots, _pickersArrowSwitcherClasses.getPickersArrowSwitcherUtilityClass, classes);
 };
@@ -115,7 +119,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
     ownerState: (0, _extends2.default)({}, ownerState, {
       hidden: previousProps.isHidden
     }),
-    className: classes.button
+    className: (0, _clsx.default)(classes.button, classes.previousIconButton)
   });
   const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
   const nextIconButtonProps = (0, _utils2.useSlotProps)({
@@ -132,7 +136,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
     ownerState: (0, _extends2.default)({}, ownerState, {
       hidden: nextProps.isHidden
     }),
-    className: classes.button
+    className: (0, _clsx.default)(classes.button, classes.nextIconButton)
   });
   const LeftArrowIcon = slots?.leftArrowIcon ?? _icons.ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
@@ -142,7 +146,8 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       additionalProps: {
         fontSize: 'inherit'
       },
-      ownerState: undefined
+      ownerState,
+      className: classes.leftArrowIcon
     }),
     leftArrowIconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
   const RightArrowIcon = slots?.rightArrowIcon ?? _icons.ArrowRightIcon;
@@ -153,7 +158,8 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       additionalProps: {
         fontSize: 'inherit'
       },
-      ownerState: undefined
+      ownerState,
+      className: classes.rightArrowIcon
     }),
     rightArrowIconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps2, _excluded3);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersArrowSwitcherRoot, (0, _extends2.default)({

package/node/internals/components/PickersArrowSwitcher/pickersArrowSwitcherClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getPickersArrowSwitcherUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiPickersArrowSwitcher', slot);
 }
-const pickersArrowSwitcherClasses = exports.pickersArrowSwitcherClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersArrowSwitcher', ['root', 'spacer', 'button']);
+const pickersArrowSwitcherClasses = exports.pickersArrowSwitcherClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersArrowSwitcher', ['root', 'spacer', 'button', 'previousIconButton', 'nextIconButton', 'leftArrowIcon', 'rightArrowIcon']);

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

@@ -46,6 +46,7 @@ exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
 const useFieldV6TextField = params => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const focusTimeoutRef = React.useRef();
+  const selectionSyncTimeoutRef = React.useRef();
   const {
     forwardedProps: {
       onFocus,
@@ -113,10 +114,14 @@ const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
-        setTimeout(() => {
+        clearTimeout(selectionSyncTimeoutRef.current);
+        selectionSyncTimeoutRef.current = setTimeout(() => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
             interactions.syncSelectionToDOM();
           }
         });
@@ -128,8 +133,7 @@ const useFieldV6TextField = params => {
     getActiveSectionIndexFromDOM: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
       const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      const isInputReadOnly = !!inputRef.current?.readOnly;
-      if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
       const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -144,10 +148,6 @@ const useFieldV6TextField = params => {
     isFieldFocused: () => inputRef.current === (0, _utils.getActiveElement)(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -172,7 +172,7 @@ const useFieldV6TextField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
       if (
@@ -306,6 +306,7 @@ const useFieldV6TextField = params => {
     }
     return () => {
       clearTimeout(focusTimeoutRef.current);
+      clearTimeout(selectionSyncTimeoutRef.current);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

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

@@ -230,7 +230,7 @@ const useFieldV7TextField = params => {
   const getInputContainerClickHandler = (0, _useEventCallback.default)(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || readOnly) {
+    if (event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
@@ -240,9 +240,6 @@ const useFieldV7TextField = params => {
     event.preventDefault();
   });
   const getInputContentFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
-    if (readOnly) {
-      return;
-    }
     setSelectedSections(sectionIndex);
   });
   const handleInputContentPaste = (0, _useEventCallback.default)(event => {

package/node/internals/index.js

@@ -213,6 +213,12 @@ Object.defineProperty(exports, "replaceInvalidDateByNull", {
     return _dateUtils.replaceInvalidDateByNull;
   }
 });
+Object.defineProperty(exports, "resolveDateTimeFormat", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeUtils.resolveDateTimeFormat;
+  }
+});
 Object.defineProperty(exports, "resolveTimeViewsResponse", {
   enumerable: true,
   get: function () {

package/node/locales/koKR.js

@@ -22,11 +22,10 @@ const koKRPickers = {
   // DateRange labels
   start: '시작',
   end: '종료',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: '시작 날짜',
+  startTime: '시작 시간',
+  endDate: '종료 날짜',
+  endTime: '종료 시간',
   // Action bar
   cancelButtonLabel: '취소',
   clearButtonLabel: '초기화',
@@ -60,23 +59,22 @@ const koKRPickers = {
   fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'DD',
-  // 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',
+  year: '년',
+  month: '월',
+  day: '일',
+  weekDay: '평일',
+  hours: '시간',
+  minutes: '분',
+  seconds: '초',
   // meridiem: 'Meridiem',
 
   // Common
-  // empty: 'Empty',
+  empty: '공란'
 };
 const koKR = exports.koKR = (0, _getPickersLocalization.getPickersLocalization)(koKRPickers);

package/node/locales/ruRU.js

@@ -23,11 +23,10 @@ const ruRUPickers = {
   // DateRange labels
   start: 'Начало',
   end: 'Конец',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Начальная дата',
+  startTime: 'Начальное время',
+  endDate: 'Конечная дата',
+  endTime: 'Конечное время',
   // Action bar
   cancelButtonLabel: 'Отмена',
   clearButtonLabel: 'Очистить',
@@ -61,23 +60,21 @@ const ruRUPickers = {
   fieldYearPlaceholder: params => 'Г'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'ММММ' : 'ММ',
   fieldDayPlaceholder: () => 'ДД',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'ДДДД' : 'ДД',
   fieldHoursPlaceholder: () => 'чч',
   fieldMinutesPlaceholder: () => 'мм',
   fieldSecondsPlaceholder: () => 'сс',
-  fieldMeridiemPlaceholder: () => '(д|п)п'
-
+  fieldMeridiemPlaceholder: () => '(д|п)п',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Год',
+  month: 'Месяц',
+  day: 'День',
+  weekDay: 'День недели',
+  hours: 'Часы',
+  minutes: 'Минуты',
+  seconds: 'Секунды',
+  meridiem: 'Меридием',
   // Common
-  // empty: 'Empty',
+  empty: 'Пустой'
 };
 const ruRU = exports.ruRU = (0, _getPickersLocalization.getPickersLocalization)(ruRUPickers);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.9.0",
+  "version": "7.11.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,10 +35,10 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.16.0",
-    "@mui/utils": "^5.16.0",
+    "@mui/system": "^5.16.2",
+    "@mui/utils": "^5.16.2",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",