@mui/x-date-pickers 6.1.0 → 6.2.0

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

@@ -5,26 +5,91 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from '../useOpenState';
 import { useLocalizationContext, useUtils } from '../useUtils';
 import { useValidation } from '../validation/useValidation';
-
-/**
- * Props used to handle the value that are common to all pickers.
- */
-
 /**
- * Props used to handle the value of non-static pickers.
+ * Decide if the new value should be published
+ * The published value will be passed to `onChange` if defined.
  */
+const shouldPublishValue = params => {
+  const {
+    action,
+    hasChanged,
+    dateState,
+    isControlled
+  } = params;
+  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
 
-/**
- * Props used to handle the value of the pickers.
- */
+  // The field is responsible for only calling `onChange` when needed.
+  if (action.name === 'setValueFromField') {
+    return true;
+  }
+  if (action.name === 'setValueFromAction') {
+    // If the component is not controlled, and the value has not been modified since the mount,
+    // Then we want to publish the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
+    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
+      return true;
+    }
+    return hasChanged(dateState.lastPublishedValue);
+  }
+  if (action.name === 'setValueFromView' && action.selectionState !== 'shallow') {
+    // On the first view,
+    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
+    if (isCurrentValueTheDefaultValue) {
+      return true;
+    }
+    return hasChanged(dateState.lastPublishedValue);
+  }
+  return false;
+};
 
 /**
- * Props passed to `usePickerViews`.
+ * Decide if the new value should be committed.
+ * The committed value will be passed to `onAccept` if defined.
+ * It will also be used as a reset target when calling the `cancel` picker action (when clicking on the "Cancel" button).
  */
+const shouldCommitValue = params => {
+  const {
+    action,
+    hasChanged,
+    dateState,
+    isControlled,
+    closeOnSelect
+  } = params;
+  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
+  if (action.name === 'setValueFromAction') {
+    // If the component is not controlled, and the value has not been modified since the mount,
+    // Then we want to commit the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
+    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
+      return true;
+    }
+    return hasChanged(dateState.lastCommittedValue);
+  }
+  if (action.name === 'setValueFromView' && action.selectionState === 'finish' && closeOnSelect) {
+    // On picker where the 1st view is also the last view,
+    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onAccept`
+    if (isCurrentValueTheDefaultValue) {
+      return true;
+    }
+    return hasChanged(dateState.lastCommittedValue);
+  }
+  return false;
+};
 
 /**
- * Props passed to `usePickerLayoutProps`.
+ * Decide if the picker should be closed after the value is updated.
  */
+const shouldClosePicker = params => {
+  const {
+    action,
+    closeOnSelect
+  } = params;
+  if (action.name === 'setValueFromAction') {
+    return true;
+  }
+  if (action.name === 'setValueFromView') {
+    return action.selectionState === 'finish' && closeOnSelect;
+  }
+  return false;
+};
 
 /**
  * Manage the value lifecycle of all the pickers.
@@ -36,22 +101,38 @@ export const usePickerValue = ({
   validator
 }) => {
   const {
-    onAccept: onAcceptProp,
+    onAccept,
     onChange,
     value: inValue,
-    defaultValue,
+    defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
     selectedSections: selectedSectionsProp,
     onSelectedSectionsChange
   } = props;
+  const {
+    current: defaultValue
+  } = React.useRef(inDefaultValue);
+  const {
+    current: isControlled
+  } = React.useRef(inValue !== undefined);
+
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isControlled !== (inValue !== undefined)) {
+        console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    }, [inValue]);
+    React.useEffect(() => {
+      if (!isControlled && defaultValue !== inDefaultValue) {
+        console.error([`MUI: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
+      }
+    }, [JSON.stringify(defaultValue)]);
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [value, setValue] = useControlled({
-    controlled: inValue,
-    default: defaultValue ?? valueManager.emptyValue,
-    name: 'usePickerValue',
-    state: 'value'
-  });
   const [selectedSections, setSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
     default: null,
@@ -62,170 +143,123 @@ export const usePickerValue = ({
     isOpen,
     setIsOpen
   } = useOpenState(props);
-  const [dateState, setDateState] = React.useState(() => ({
-    committed: value,
-    draft: value,
-    resetFallback: value
-  }));
+  const [dateState, setDateState] = React.useState(() => {
+    let initialValue;
+    if (inValue !== undefined) {
+      initialValue = inValue;
+    } else if (defaultValue !== undefined) {
+      initialValue = defaultValue;
+    } else {
+      initialValue = valueManager.emptyValue;
+    }
+    return {
+      draft: initialValue,
+      lastPublishedValue: initialValue,
+      lastCommittedValue: initialValue,
+      lastControlledValue: inValue,
+      hasBeenModifiedSinceMount: false
+    };
+  });
   useValidation(_extends({}, props, {
-    value
+    value: dateState.draft
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
-  const setDate = useEventCallback(params => {
-    setDateState(prev => {
-      switch (params.action) {
-        case 'setAll':
-        case 'acceptAndClose':
-          {
-            return {
-              draft: params.value,
-              committed: params.value,
-              resetFallback: params.value
-            };
-          }
-        case 'setCommitted':
-          {
-            return _extends({}, prev, {
-              draft: params.value,
-              committed: params.value
-            });
-          }
-        case 'setDraft':
-          {
-            return _extends({}, prev, {
-              draft: params.value
-            });
-          }
-        default:
-          {
-            return prev;
-          }
-      }
-    });
-    if (!params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
-      setValue(params.value);
-      if (onChange) {
-        const context = {
-          validationError: params.contextFromField == null ? validator({
-            adapter,
-            value: params.value,
-            props: _extends({}, props, {
-              value: params.value
-            })
-          }) : params.contextFromField.validationError
-        };
-        onChange(params.value, context);
-      }
+  const updateDate = useEventCallback(action => {
+    const updaterParams = {
+      action,
+      dateState,
+      hasChanged: comparison => !valueManager.areValuesEqual(utils, action.value, comparison),
+      isControlled,
+      closeOnSelect
+    };
+    const shouldPublish = shouldPublishValue(updaterParams);
+    const shouldCommit = shouldCommitValue(updaterParams);
+    const shouldClose = shouldClosePicker(updaterParams);
+    setDateState(prev => _extends({}, prev, {
+      draft: action.value,
+      lastPublishedValue: shouldPublish ? action.value : prev.lastPublishedValue,
+      lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
+      hasBeenModifiedSinceMount: true
+    }));
+    if (shouldPublish && onChange) {
+      const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
+        adapter,
+        value: action.value,
+        props: _extends({}, props, {
+          value: action.value
+        })
+      });
+      const context = {
+        validationError
+      };
+      onChange(action.value, context);
+    }
+    if (shouldCommit && onAccept) {
+      onAccept(action.value);
     }
-    if (params.action === 'acceptAndClose') {
+    if (shouldClose) {
       setIsOpen(false);
-      if (onAcceptProp && !valueManager.areValuesEqual(utils, dateState.resetFallback, params.value)) {
-        onAcceptProp(params.value);
-      }
     }
   });
   React.useEffect(() => {
     if (isOpen) {
-      // Update all dates in state to equal the current prop value
-      setDate({
-        action: 'setAll',
-        value,
-        skipOnChangeCall: true
-      });
+      setDateState(prev => _extends({}, prev, {
+        lastCommittedValue: dateState.draft
+      }));
     }
   }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Set the draft and committed date to equal the new prop value.
-  if (!valueManager.areValuesEqual(utils, dateState.committed, value)) {
-    setDate({
-      action: 'setCommitted',
-      value,
-      skipOnChangeCall: true
-    });
+  if (inValue !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue))) {
+    setDateState(prev => _extends({}, prev, {
+      lastControlledValue: inValue,
+      draft: inValue
+    }));
   }
   const handleClear = useEventCallback(() => {
-    // Reset all date in state to the empty value and close picker.
-    setDate({
+    updateDate({
       value: valueManager.emptyValue,
-      action: 'acceptAndClose'
+      name: 'setValueFromAction',
+      pickerAction: 'clear'
     });
   });
   const handleAccept = useEventCallback(() => {
-    // Set all date in state to equal the current draft value and close picker.
-    setDate({
-      value: dateState.draft,
-      action: 'acceptAndClose'
+    updateDate({
+      value: dateState.lastPublishedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'accept'
     });
   });
   const handleDismiss = useEventCallback(() => {
-    // Set all dates in state to equal the last committed date.
-    // e.g. Reset the state to the last committed value.
-    setDate({
-      value: dateState.committed,
-      action: 'acceptAndClose'
+    updateDate({
+      value: dateState.lastPublishedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'dismiss'
     });
   });
   const handleCancel = useEventCallback(() => {
-    // Set all dates in state to equal the last accepted date and close picker.
-    // e.g. Reset the state to the last accepted value
-    setDate({
-      value: dateState.resetFallback,
-      action: 'acceptAndClose'
+    updateDate({
+      value: dateState.lastCommittedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'cancel'
     });
   });
   const handleSetToday = useEventCallback(() => {
-    // Set all dates in state to equal today and close picker.
-    setDate({
+    updateDate({
       value: valueManager.getTodayValue(utils),
-      action: 'acceptAndClose'
+      name: 'setValueFromAction',
+      pickerAction: 'today'
     });
   });
   const handleOpen = useEventCallback(() => setIsOpen(true));
   const handleClose = useEventCallback(() => setIsOpen(false));
-  const handleChange = useEventCallback((newDate, selectionState = 'partial') => {
-    switch (selectionState) {
-      case 'shallow':
-        {
-          // Update the `draft` state but do not fire `onChange`
-          return setDate({
-            action: 'setDraft',
-            value: newDate,
-            skipOnChangeCall: true
-          });
-        }
-      case 'partial':
-        {
-          // Update the `draft` state and fire `onChange`
-          return setDate({
-            action: 'setDraft',
-            value: newDate
-          });
-        }
-      case 'finish':
-        {
-          if (closeOnSelect) {
-            // Set all dates in state to equal the new date and close picker.
-            return setDate({
-              value: newDate,
-              action: 'acceptAndClose'
-            });
-          }
-
-          // Updates the `committed` state and fire `onChange`
-          return setDate({
-            value: newDate,
-            action: 'setCommitted'
-          });
-        }
-      default:
-        {
-          throw new Error('MUI: Invalid selectionState passed to `onDateChange`');
-        }
-    }
-  });
-  const handleChangeAndCommit = useEventCallback((newValue, contextFromField) => setDate({
-    action: 'setCommitted',
+  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
+    name: 'setValueFromView',
     value: newValue,
-    contextFromField
+    selectionState
+  }));
+  const handleChangeField = useEventCallback((newValue, context) => updateDate({
+    name: 'setValueFromField',
+    value: newValue,
+    context
   }));
   const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
     setSelectedSections(newSelectedSections);
@@ -242,7 +276,7 @@ export const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeAndCommit,
+    onChange: handleChangeField,
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
@@ -266,7 +300,7 @@ export const usePickerValue = ({
   };
   const layoutResponse = _extends({}, actions, {
     value: viewValue,
-    onChange: handleChangeAndCommit,
+    onChange: handleChange,
     isValid
   });
   return {

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

@@ -0,0 +1 @@
+export {};

package/modern/tests/describeGregorianAdapter/describeGregorianAdapter.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import createDescribe from '@mui/monorepo/test/utils/createDescribe';
+import { testCalculations } from './testCalculations';
+import { testLocalization } from './testLocalization';
+import { testFormat } from './testFormat';
+export const TEST_DATE_ISO = '2018-10-30T11:44:00.000Z';
+function innerGregorianDescribeAdapter(Adapter, params) {
+  const adapter = new Adapter({});
+  describe(adapter.lib, () => {
+    const testSuitParams = _extends({}, params, {
+      adapter,
+      testDateISO: TEST_DATE_ISO,
+      testDate: adapter.date(TEST_DATE_ISO)
+    });
+    testCalculations(testSuitParams);
+    testLocalization(testSuitParams);
+    testFormat(testSuitParams);
+  });
+}
+export const describeGregorianAdapter = createDescribe('Adapter methods', innerGregorianDescribeAdapter);

package/modern/tests/describeGregorianAdapter/describeGregorianAdapter.types.js

@@ -0,0 +1 @@
+export {};

package/modern/tests/describeGregorianAdapter/index.js

@@ -0,0 +1 @@
+export { describeGregorianAdapter, TEST_DATE_ISO } from './describeGregorianAdapter';