@mui/x-date-pickers 8.3.1 → 8.5.0

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -133,7 +133,11 @@ const useFieldCharacterEditing = ({
     return applyQuery(params, getFirstSectionValueMatchingWithQuery);
   };
   const applyNumericEditing = params => {
-    const getNewSectionValue = (queryValue, section) => {
+    const getNewSectionValue = ({
+      queryValue,
+      skipIfBelowMinimum,
+      section
+    }) => {
       const cleanQueryValue = (0, _useField.removeLocalizedDigits)(queryValue, localizedDigits);
       const queryValueNumber = Number(cleanQueryValue);
       const sectionBoundaries = sectionsValueBoundaries[section.type]({
@@ -150,7 +154,7 @@ const useFieldCharacterEditing = ({
       // If the user types `0` on a month section,
       // It is below the minimum, but we want to store the `0` in the query,
       // So that when he pressed `1`, it will store `01` and move to the next section.
-      if (queryValueNumber < sectionBoundaries.minimum) {
+      if (skipIfBelowMinimum && queryValueNumber < sectionBoundaries.minimum) {
         return {
           saveQuery: true
         };
@@ -164,20 +168,28 @@ const useFieldCharacterEditing = ({
     };
     const getFirstSectionValueMatchingWithQuery = (queryValue, activeSection) => {
       if (activeSection.contentType === 'digit' || activeSection.contentType === 'digit-with-letter') {
-        return getNewSectionValue(queryValue, activeSection);
+        return getNewSectionValue({
+          queryValue,
+          skipIfBelowMinimum: false,
+          section: activeSection
+        });
       }
 
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
         const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, 'digit', 'month', 'MM');
-        const response = getNewSectionValue(queryValue, {
-          type: activeSection.type,
-          format: 'MM',
-          hasLeadingZerosInFormat,
-          hasLeadingZerosInInput: true,
-          contentType: 'digit',
-          maxLength: 2
+        const response = getNewSectionValue({
+          queryValue,
+          skipIfBelowMinimum: true,
+          section: {
+            type: activeSection.type,
+            format: 'MM',
+            hasLeadingZerosInFormat,
+            hasLeadingZerosInInput: true,
+            contentType: 'digit',
+            maxLength: 2
+          }
         });
         if (isQueryResponseWithoutValue(response)) {
           return response;
@@ -191,7 +203,11 @@ const useFieldCharacterEditing = ({
       // When editing a letter-format weekDay and the user presses a digit,
       // We can support the numeric editing by returning the nth day in the week day array.
       if (activeSection.type === 'weekDay') {
-        const response = getNewSectionValue(queryValue, activeSection);
+        const response = getNewSectionValue({
+          queryValue,
+          skipIfBelowMinimum: true,
+          section: activeSection
+        });
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFieldSectionContainerProps = useFieldSectionContainerProps;
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -25,14 +23,14 @@ function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = (0, _useEventCallback.default)(sectionIndex => event => {
+  const createHandleClick = React.useCallback(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 (disabled || event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
-  });
+  }, [disabled, setSelectedSections]);
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
     onClick: createHandleClick(sectionIndex)

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -136,12 +136,12 @@ function useFieldSectionContentProps(parameters) {
     event.preventDefault();
     event.dataTransfer.dropEffect = 'none';
   });
-  const createFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
+  const createFocusHandler = React.useCallback(sectionIndex => () => {
     if (disabled) {
       return;
     }
     setSelectedSections(sectionIndex);
-  });
+  }, [disabled, setSelectedSections]);
   return React.useCallback((section, sectionIndex) => {
     const sectionBoundaries = sectionsValueBoundaries[section.type]({
       currentDate: fieldValueManager.getDateFromSection(value, section),

package/internals/hooks/useField/useFieldState.js

@@ -276,10 +276,10 @@ const useFieldState = parameters => {
     }
 
     /**
-     * If all the sections are filled but the date is invalid,
+     * If all the sections are filled but the date is invalid and the previous date is valid or null,
      * Then we publish an invalid date.
      */
-    if (newActiveDateSections.every(sectionBis => sectionBis.value !== '')) {
+    if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || utils.isValid(activeDate))) {
       setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
       return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
     }

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -98,6 +98,7 @@ const useMobilePicker = _ref => {
       })]
     })
   }));
+  if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {
     renderPicker
   };

package/internals/hooks/useNullableFieldPrivateContext.js

@@ -8,6 +8,7 @@ exports.PickerFieldPrivateContext = void 0;
 exports.useNullableFieldPrivateContext = useNullableFieldPrivateContext;
 var React = _interopRequireWildcard(require("react"));
 const PickerFieldPrivateContext = exports.PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerFieldPrivateContext.displayName = "PickerFieldPrivateContext";
 function useNullableFieldPrivateContext() {
   return React.useContext(PickerFieldPrivateContext);
 }

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -71,6 +71,7 @@ const useStaticPicker = _ref => {
       children: renderCurrentView()
     }))
   }));
+  if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {
     renderPicker
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.3.1",
+  "version": "8.5.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.3.1"
+    "@mui/x-internals": "8.5.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/timeViewRenderers/timeViewRenderers.js

@@ -71,6 +71,7 @@ const renderTimeViewClock = ({
   timezone: timezone
 });
 exports.renderTimeViewClock = renderTimeViewClock;
+if (process.env.NODE_ENV !== "production") renderTimeViewClock.displayName = "renderTimeViewClock";
 const renderDigitalClockTimeView = ({
   view,
   onViewChange,
@@ -131,6 +132,7 @@ const renderDigitalClockTimeView = ({
   timezone: timezone
 });
 exports.renderDigitalClockTimeView = renderDigitalClockTimeView;
+if (process.env.NODE_ENV !== "production") renderDigitalClockTimeView.displayName = "renderDigitalClockTimeView";
 const renderMultiSectionDigitalClockTimeView = ({
   view,
   onViewChange,
@@ -190,4 +192,5 @@ const renderMultiSectionDigitalClockTimeView = ({
   skipDisabled: skipDisabled,
   timezone: timezone
 });
-exports.renderMultiSectionDigitalClockTimeView = renderMultiSectionDigitalClockTimeView;
+exports.renderMultiSectionDigitalClockTimeView = renderMultiSectionDigitalClockTimeView;
+if (process.env.NODE_ENV !== "production") renderMultiSectionDigitalClockTimeView.displayName = "renderMultiSectionDigitalClockTimeView";