@mui/x-date-pickers 7.0.0-alpha.6 → 7.0.0-alpha.8

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

@@ -138,12 +138,12 @@ export const usePickerValue = ({
   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'));
+        console.error([`MUI X: 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'));
+        console.error([`MUI X: 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)]);
   }

package/modern/internals/hooks/useUtils.js

@@ -5,10 +5,10 @@ import { DEFAULT_LOCALE } from '../../locales/enUS';
 export const useLocalizationContext = () => {
   const localization = React.useContext(MuiPickersAdapterContext);
   if (localization === null) {
-    throw new Error(['MUI: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
+    throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
   }
   if (localization.utils === null) {
-    throw new Error(['MUI: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+    throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
   }
   const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
   return React.useMemo(() => _extends({}, localization, {

package/modern/internals/hooks/useViews.js

@@ -15,11 +15,11 @@ export function useViews({
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
       if (inView != null && !views.includes(inView)) {
-        console.warn(`MUI: \`view="${inView}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
+        console.warn(`MUI X: \`view="${inView}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
         warnedOnceNotValidView = true;
       }
       if (inView == null && openTo != null && !views.includes(openTo)) {
-        console.warn(`MUI: \`openTo="${openTo}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
+        console.warn(`MUI X: \`openTo="${openTo}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
         warnedOnceNotValidView = true;
       }
     }
@@ -63,11 +63,12 @@ export function useViews({
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = useEventCallback(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -76,7 +77,6 @@ export function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -85,18 +85,19 @@ export function useViews({
     // but when 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 = useEventCallback((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -107,7 +108,6 @@ export 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/modern/internals/index.js

@@ -14,10 +14,12 @@ export { useField, createDateStrForInputFromSections, addPositionPropertiesToSec
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
+export { useViews } from './hooks/useViews';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from './utils/date-utils';
+export { resolveTimeViewsResponse } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
@@ -26,6 +28,8 @@ export { extractValidationProps } from './utils/validation/extractValidationProp
 export { validateDate } from './utils/validation/validateDate';
 export { validateDateTime } from './utils/validation/validateDateTime';
 export { validateTime } from './utils/validation/validateTime';
+export { applyDefaultViewProps } from './utils/views';
 export { buildDeprecatedPropsWarning, buildWarning } from './utils/warning';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
-export { useCalendarState } from '../DateCalendar/useCalendarState';
+export { useCalendarState } from '../DateCalendar/useCalendarState';
+export { isTimeView } from './utils/time-utils';

package/modern/internals/utils/views.js

@@ -19,7 +19,7 @@ export const applyDefaultViewProps = ({
   } else if (viewsWithDefault.length > 0) {
     openToWithDefault = viewsWithDefault[0];
   } else {
-    throw new Error('MUI: The `views` prop must contain at least one view');
+    throw new Error('MUI X: The `views` prop must contain at least one view.');
   }
   return {
     views: viewsWithDefault,

package/modern/locales/index.js

@@ -1,6 +1,7 @@
 export * from './beBY';
 export * from './caES';
 export * from './csCZ';
+export * from './daDK';
 export * from './deDE';
 export * from './elGR';
 export * from './enUS';

package/node/AdapterDateFns/AdapterDateFns.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AdapterDateFns = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _addDays = _interopRequireDefault(require("date-fns/addDays"));
 var _addSeconds = _interopRequireDefault(require("date-fns/addSeconds"));
 var _addMinutes = _interopRequireDefault(require("date-fns/addMinutes"));
@@ -50,200 +49,11 @@ var _startOfYear = _interopRequireDefault(require("date-fns/startOfYear"));
 var _isWithinInterval = _interopRequireDefault(require("date-fns/isWithinInterval"));
 var _enUS = _interopRequireDefault(require("date-fns/locale/en-US"));
 var _longFormatters = _interopRequireDefault(require("date-fns/_lib/format/longFormatters"));
+var _AdapterDateFnsBase = require("../AdapterDateFnsBase");
 /* eslint-disable class-methods-use-this */
 
 // @ts-ignore
 
-const formatTokenMap = {
-  // Year
-  y: {
-    sectionType: 'year',
-    contentType: 'digit',
-    maxLength: 4
-  },
-  yy: 'year',
-  yyy: {
-    sectionType: 'year',
-    contentType: 'digit',
-    maxLength: 4
-  },
-  yyyy: 'year',
-  // Month
-  M: {
-    sectionType: 'month',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  MM: 'month',
-  MMMM: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  MMM: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  L: {
-    sectionType: 'month',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  LL: 'month',
-  LLL: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  LLLL: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  // Day of the month
-  d: {
-    sectionType: 'day',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  dd: 'day',
-  do: {
-    sectionType: 'day',
-    contentType: 'digit-with-letter'
-  },
-  // Day of the week
-  E: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  EE: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  EEE: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  EEEE: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  EEEEE: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  i: {
-    sectionType: 'weekDay',
-    contentType: 'digit',
-    maxLength: 1
-  },
-  ii: 'weekDay',
-  iii: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  iiii: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  e: {
-    sectionType: 'weekDay',
-    contentType: 'digit',
-    maxLength: 1
-  },
-  ee: 'weekDay',
-  eee: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  eeee: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  eeeee: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  eeeeee: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  c: {
-    sectionType: 'weekDay',
-    contentType: 'digit',
-    maxLength: 1
-  },
-  cc: 'weekDay',
-  ccc: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  cccc: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  ccccc: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  cccccc: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  // Meridiem
-  a: 'meridiem',
-  aa: 'meridiem',
-  aaa: 'meridiem',
-  // Hours
-  H: {
-    sectionType: 'hours',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  HH: 'hours',
-  h: {
-    sectionType: 'hours',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  hh: 'hours',
-  // Minutes
-  m: {
-    sectionType: 'minutes',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  mm: 'minutes',
-  // Seconds
-  s: {
-    sectionType: 'seconds',
-    contentType: 'digit',
-    maxLength: 2
-  },
-  ss: 'seconds'
-};
-const defaultFormats = {
-  year: 'yyyy',
-  month: 'LLLL',
-  monthShort: 'MMM',
-  dayOfMonth: 'd',
-  weekday: 'EEEE',
-  weekdayShort: 'EEEEEE',
-  hours24h: 'HH',
-  hours12h: 'hh',
-  meridiem: 'aa',
-  minutes: 'mm',
-  seconds: 'ss',
-  fullDate: 'PP',
-  keyboardDate: 'P',
-  shortDate: 'MMM d',
-  normalDate: 'd MMMM',
-  normalDateWithWeekday: 'EEE, MMM d',
-  fullTime: 'p',
-  fullTime12h: 'hh:mm aa',
-  fullTime24h: 'HH:mm',
-  keyboardDateTime: 'P p',
-  keyboardDateTime12h: 'P hh:mm aa',
-  keyboardDateTime24h: 'P HH:mm'
-};
-
 /**
  * Based on `@date-io/date-fns`
  *
@@ -269,40 +79,19 @@ const defaultFormats = {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-class AdapterDateFns {
+class AdapterDateFns extends _AdapterDateFnsBase.AdapterDateFnsBase {
   constructor({
-    locale: _locale,
+    locale,
     formats
   } = {}) {
-    this.isMUIAdapter = true;
-    this.isTimezoneCompatible = false;
-    this.lib = 'date-fns';
-    this.locale = void 0;
-    this.formats = void 0;
-    this.formatTokenMap = formatTokenMap;
-    this.escapedCharacters = {
-      start: "'",
-      end: "'"
-    };
-    this.date = value => {
-      if (typeof value === 'undefined') {
-        return new Date();
-      }
-      if (value === null) {
-        return null;
-      }
-      return new Date(value);
-    };
-    this.getInvalidDate = () => new Date('Invalid Date');
-    this.getTimezone = () => {
-      return 'default';
-    };
-    this.setTimezone = value => {
-      return value;
-    };
-    this.toJsDate = value => {
-      return value;
-    };
+    if (typeof _addDays.default !== 'function') {
+      throw new Error(['MUI: The `date-fns` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
+    }
+    super({
+      locale: locale ?? _enUS.default,
+      formats,
+      longFormatters: _longFormatters.default
+    });
     this.parse = (value, format) => {
       if (value === '') {
         return null;
@@ -311,33 +100,6 @@ class AdapterDateFns {
         locale: this.locale
       });
     };
-    this.getCurrentLocaleCode = () => {
-      return this.locale?.code || 'en-US';
-    };
-    // Note: date-fns input types are more lenient than this adapter, so we need to expose our more
-    // strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.
-    this.is12HourCycleInCurrentLocale = () => {
-      if (this.locale) {
-        return /a/.test(this.locale.formatLong.time());
-      }
-
-      // By default, date-fns is using en-US locale with am/pm enabled
-      return true;
-    };
-    this.expandFormat = format => {
-      const longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
-
-      // @see https://github.com/date-fns/date-fns/blob/master/src/format/index.js#L31
-      return format.match(longFormatRegexp).map(token => {
-        const firstCharacter = token[0];
-        if (firstCharacter === 'p' || firstCharacter === 'P') {
-          const longFormatter = _longFormatters.default[firstCharacter];
-          const locale = this.locale || _enUS.default;
-          return longFormatter(token, locale.formatLong, {});
-        }
-        return token;
-      }).join('');
-    };
     this.isValid = value => {
       if (value == null) {
         return false;
@@ -352,9 +114,6 @@ class AdapterDateFns {
         locale: this.locale
       });
     };
-    this.formatNumber = numberToFormat => {
-      return numberToFormat;
-    };
     this.isEqual = (value, comparing) => {
       if (value === null && comparing === null) {
         return true;
@@ -525,8 +284,6 @@ class AdapterDateFns {
       }
       return years;
     };
-    this.locale = _locale;
-    this.formats = (0, _extends2.default)({}, defaultFormats, formats);
   }
 }
 exports.AdapterDateFns = AdapterDateFns;