@mui/x-date-pickers 6.18.6 → 6.19.0

package/node/DateCalendar/DateCalendar.js

@@ -264,9 +264,9 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
   const handleSelectedDayChange = (0, _utils2.unstable_useEventCallback)(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value ?? referenceDate), 'finish');
+      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value ?? referenceDate), 'finish', view);
     }
-    return handleValueChange(day, 'finish');
+    return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
     if (value != null && utils.isValid(value)) {
@@ -455,9 +455,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: _propTypes.default.func,
   /**

package/node/DigitalClock/DigitalClock.js

@@ -348,8 +348,9 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -134,7 +134,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = (0, _useViews.useViews)({
     view: inView,
@@ -146,7 +146,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     onFocusedViewChange
   });
   const handleMeridiemValueChange = (0, _useEventCallback.default)(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -230,11 +230,6 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const handleSectionChange = (0, _useEventCallback.default)((sectionView, newValue) => {
-    const viewIndex = views.indexOf(sectionView);
-    const nextView = views[viewIndex + 1];
-    setValueAndGoToView(newValue, nextView, sectionView);
-  });
   const buildViewProps = React.useCallback(viewToBuild => {
     switch (viewToBuild) {
       case 'hours':
@@ -242,7 +237,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
           return {
             onChange: hours => {
               const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: (0, _MultiSectionDigitalClock.getHourSectionOptions)({
               now,
@@ -259,7 +254,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: (0, _MultiSectionDigitalClock.getTimeSectionOptions)({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -276,7 +271,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: (0, _MultiSectionDigitalClock.getTimeSectionOptions)({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -311,7 +306,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return (0, _extends2.default)({}, result, {
@@ -421,8 +416,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -97,7 +97,7 @@ const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.defaul
 const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
-  const previousSelected = React.useRef(null);
+  const previousActive = React.useRef(null);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -124,19 +124,15 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     if (containerRef.current === null) {
       return;
     }
-    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousSelected.current !== selectedItem) {
-        previousSelected.current = selectedItem;
-      }
-      return;
+    const activeItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
     }
-    previousSelected.current = selectedItem;
-    if (active && autoFocus) {
-      selectedItem.focus();
+    if (!activeItem || previousActive.current === activeItem) {
+      return;
     }
-    const offsetTop = selectedItem.offsetTop;
+    previousActive.current = activeItem;
+    const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;

package/node/TimeClock/TimeClock.js

@@ -412,8 +412,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/hooks/useClearableField.js

@@ -47,8 +47,8 @@ const useClearableField = ({
     ownerState: {}
   });
   const InputProps = (0, _extends2.default)({}, ForwardedInputProps, {
-    endAdornment: clearable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
         position: "end",
         sx: {
           marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5
@@ -60,7 +60,7 @@ const useClearableField = ({
           }, endClearIconProps))
         }))
       }), ForwardedInputProps?.endAdornment]
-    }) : ForwardedInputProps?.endAdornment
+    })
   });
   const fieldProps = (0, _extends2.default)({}, forwardedFieldProps, {
     sx: [{

package/node/index.js

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

package/node/internals/hooks/useViews.js

@@ -73,11 +73,12 @@ function useViews({
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = (0, _useEventCallback.default)(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -86,7 +87,6 @@ function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = (0, _useEventCallback.default)((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -95,18 +95,19 @@ function useViews({
     // but we it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  const setValueAndGoToView = (0, _useEventCallback.default)((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -117,7 +118,6 @@ function useViews({
     // Always return up to date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
-    setValueAndGoToNextView,
-    setValueAndGoToView
+    setValueAndGoToNextView
   };
 }

package/node/locales/index.js

@@ -36,6 +36,17 @@ Object.keys(_csCZ).forEach(function (key) {
     }
   });
 });
+var _daDK = require("./daDK");
+Object.keys(_daDK).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _daDK[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _daDK[key];
+    }
+  });
+});
 var _deDE = require("./deDE");
 Object.keys(_deDE).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.18.6",
+  "version": "6.19.0",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -46,7 +46,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.8.6",
     "@mui/system": "^5.8.0",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.25.0 || ^3.2.0",
     "date-fns-jalali": "^2.13.0-0",
     "dayjs": "^1.10.7",
     "luxon": "^3.0.2",