@mui/x-date-pickers 6.18.6 → 6.19.0

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -125,7 +125,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = useViews({
     view: inView,
@@ -137,7 +137,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     onFocusedViewChange
   });
   const handleMeridiemValueChange = useEventCallback(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -221,11 +221,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const handleSectionChange = useEventCallback((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':
@@ -233,7 +228,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
           return {
             onChange: hours => {
               const valueWithMeridiem = convertValueToMeridiem(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: getHourSectionOptions({
               now,
@@ -250,7 +245,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -267,7 +262,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -302,7 +297,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       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 _extends({}, result, {
@@ -412,8 +407,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: PropTypes.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/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -88,7 +88,7 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
 export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
-  const previousSelected = React.useRef(null);
+  const previousActive = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -115,19 +115,15 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     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/modern/TimeClock/TimeClock.js

@@ -404,8 +404,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: PropTypes.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/modern/hooks/useClearableField.js

@@ -39,8 +39,8 @@ export const useClearableField = ({
     ownerState: {}
   });
   const InputProps = _extends({}, ForwardedInputProps, {
-    endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(InputAdornment, {
+    endAdornment: /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [clearable && /*#__PURE__*/_jsx(InputAdornment, {
         position: "end",
         sx: {
           marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5
@@ -52,7 +52,7 @@ export const useClearableField = ({
           }, endClearIconProps))
         }))
       }), ForwardedInputProps?.endAdornment]
-    }) : ForwardedInputProps?.endAdornment
+    })
   });
   const fieldProps = _extends({}, forwardedFieldProps, {
     sx: [{

package/modern/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/modern/internals/hooks/useViews.js

@@ -64,11 +64,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);
     }
@@ -77,7 +78,6 @@ export function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -86,18 +86,19 @@ export 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 = useEventCallback((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -108,7 +109,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/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"));
@@ -62,206 +61,11 @@ var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 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',
-  fullDateWithWeekday: 'PPPP',
-  keyboardDate: 'P',
-  shortDate: 'MMM d',
-  normalDate: 'd MMMM',
-  normalDateWithWeekday: 'EEE, MMM d',
-  monthAndYear: 'LLLL yyyy',
-  monthAndDate: 'MMMM d',
-  fullTime: 'p',
-  fullTime12h: 'hh:mm aa',
-  fullTime24h: 'HH:mm',
-  fullDateTime: 'PP p',
-  fullDateTime12h: 'PP hh:mm aa',
-  fullDateTime24h: 'PP HH:mm',
-  keyboardDateTime: 'P p',
-  keyboardDateTime12h: 'P hh:mm aa',
-  keyboardDateTime24h: 'P HH:mm'
-};
-
 /**
  * Based on `@date-io/date-fns`
  *
@@ -287,42 +91,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.dateWithTimezone = value => {
-      return this.date(value);
-    };
-    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.parseISO = isoString => {
       return (0, _parseISO.default)(isoString);
     };
@@ -339,39 +120,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.getFormatHelperText = format => {
-      return this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
-    };
-    this.isNull = value => {
-      return value === null;
-    };
     this.isValid = value => {
       return (0, _isValid.default)(this.date(value));
     };
@@ -383,9 +131,6 @@ class AdapterDateFns {
         locale: this.locale
       });
     };
-    this.formatNumber = numberToFormat => {
-      return numberToFormat;
-    };
     this.getDiff = (value, comparing, unit) => {
       switch (unit) {
         case 'years':
@@ -610,11 +355,6 @@ class AdapterDateFns {
       }
       return years;
     };
-    this.getMeridiemText = ampm => {
-      return ampm === 'am' ? 'AM' : 'PM';
-    };
-    this.locale = _locale;
-    this.formats = (0, _extends2.default)({}, defaultFormats, formats);
   }
 }
 exports.AdapterDateFns = AdapterDateFns;