@mui/x-date-pickers 8.9.2 → 8.10.2

package/PickersLayout/PickersLayout.js

@@ -39,26 +39,29 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   },
   variants: [{
     props: {
-      pickerOrientation: 'landscape'
+      pickerOrientation: 'landscape',
+      hasShortcuts: false
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
         gridColumn: 1,
-        gridRow: '2 / 3'
-      },
-      [`.${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: '2 / 4',
-        gridRow: 1
+        gridRow: '1 / 3'
       }
     }
   }, {
     props: {
       pickerOrientation: 'landscape',
-      layoutDirection: 'rtl'
+      hasShortcuts: true
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
-        gridColumn: 3
+        gridColumn: '2 / 4',
+        gridRow: 1,
+        maxWidth: 'max-content'
+      },
+      [`& .${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: 1,
+        gridRow: 2
       }
     }
   }, {
@@ -77,7 +80,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      pickerOrientation: 'portrait',
+      hasShortcuts: true,
       layoutDirection: 'rtl'
     },
     style: {

package/PickersLayout/PickersLayout.types.d.ts

@@ -33,6 +33,11 @@ export interface PickerLayoutOwnerState extends PickerOwnerState {
    * Is equal to "rtl" when the layout is in right-to-left direction.
    */
   layoutDirection: 'ltr' | 'rtl';
+  /**
+   * Whether the layout should display the shortcuts panel or not.
+   * This flag is used to adjust the layout accordingly.
+   */
+  hasShortcuts: boolean;
 }
 export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {
   /**

package/PickersLayout/usePickerLayout.js

@@ -54,7 +54,8 @@ const usePickerLayout = props => {
     classes: classesProp
   } = props;
   const ownerState = React.useMemo(() => (0, _extends2.default)({}, pickerOwnerState, {
-    layoutDirection: isRtl ? 'rtl' : 'ltr'
+    layoutDirection: isRtl ? 'rtl' : 'ltr',
+    hasShortcuts: false
   }), [pickerOwnerState, isRtl]);
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -99,6 +100,7 @@ const usePickerLayout = props => {
     className: classes.shortcuts,
     ownerState
   });
+  const hasShortcuts = Array.isArray(shortcutsProps?.items) && shortcutsProps.items.length > 0;
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Shortcuts, (0, _extends2.default)({}, shortcutsProps)) : null;
   return {
     toolbar,
@@ -106,7 +108,9 @@ const usePickerLayout = props => {
     tabs,
     actionBar,
     shortcuts,
-    ownerState
+    ownerState: (0, _extends2.default)({}, ownerState, {
+      hasShortcuts
+    })
   };
 };
 var _default = exports.default = usePickerLayout;

package/esm/AdapterDateFns/AdapterDateFns.js

@@ -88,198 +88,199 @@ export class AdapterDateFns extends AdapterDateFnsBase {
       formats,
       longFormatters
     });
-    // TODO: explicit return types can be removed once there is only one date-fns version supported
-    this.parse = (value, format) => {
-      if (value === '') {
-        return null;
-      }
-      return dateFnsParse(value, format, new Date(), {
-        locale: this.locale
-      });
-    };
-    this.isValid = value => {
-      if (value == null) {
-        return false;
-      }
-      return isValid(value);
-    };
-    this.format = (value, formatKey) => {
-      return this.formatByString(value, this.formats[formatKey]);
-    };
-    this.formatByString = (value, formatString) => {
-      return dateFnsFormat(value, formatString, {
-        locale: this.locale
-      });
-    };
-    this.isEqual = (value, comparing) => {
-      if (value === null && comparing === null) {
-        return true;
-      }
-      if (value === null || comparing === null) {
-        return false;
-      }
-      return isEqual(value, comparing);
-    };
-    this.isSameYear = (value, comparing) => {
-      return isSameYear(value, comparing);
-    };
-    this.isSameMonth = (value, comparing) => {
-      return isSameMonth(value, comparing);
-    };
-    this.isSameDay = (value, comparing) => {
-      return isSameDay(value, comparing);
-    };
-    this.isSameHour = (value, comparing) => {
-      return isSameHour(value, comparing);
-    };
-    this.isAfter = (value, comparing) => {
-      return isAfter(value, comparing);
-    };
-    this.isAfterYear = (value, comparing) => {
-      return isAfter(value, endOfYear(comparing));
-    };
-    this.isAfterDay = (value, comparing) => {
-      return isAfter(value, endOfDay(comparing));
-    };
-    this.isBefore = (value, comparing) => {
-      return isBefore(value, comparing);
-    };
-    this.isBeforeYear = (value, comparing) => {
-      return isBefore(value, this.startOfYear(comparing));
-    };
-    this.isBeforeDay = (value, comparing) => {
-      return isBefore(value, this.startOfDay(comparing));
-    };
-    this.isWithinRange = (value, [start, end]) => {
-      return isWithinInterval(value, {
-        start,
-        end
-      });
-    };
-    this.startOfYear = value => {
-      return startOfYear(value);
-    };
-    this.startOfMonth = value => {
-      return startOfMonth(value);
-    };
-    this.startOfWeek = value => {
-      return startOfWeek(value, {
-        locale: this.locale
-      });
-    };
-    this.startOfDay = value => {
-      return startOfDay(value);
-    };
-    this.endOfYear = value => {
-      return endOfYear(value);
-    };
-    this.endOfMonth = value => {
-      return endOfMonth(value);
-    };
-    this.endOfWeek = value => {
-      return endOfWeek(value, {
-        locale: this.locale
-      });
-    };
-    this.endOfDay = value => {
-      return endOfDay(value);
-    };
-    this.addYears = (value, amount) => {
-      return addYears(value, amount);
-    };
-    this.addMonths = (value, amount) => {
-      return addMonths(value, amount);
-    };
-    this.addWeeks = (value, amount) => {
-      return addWeeks(value, amount);
-    };
-    this.addDays = (value, amount) => {
-      return addDays(value, amount);
-    };
-    this.addHours = (value, amount) => {
-      return addHours(value, amount);
-    };
-    this.addMinutes = (value, amount) => {
-      return addMinutes(value, amount);
-    };
-    this.addSeconds = (value, amount) => {
-      return addSeconds(value, amount);
-    };
-    this.getYear = value => {
-      return getYear(value);
-    };
-    this.getMonth = value => {
-      return getMonth(value);
-    };
-    this.getDate = value => {
-      return getDate(value);
-    };
-    this.getHours = value => {
-      return getHours(value);
-    };
-    this.getMinutes = value => {
-      return getMinutes(value);
-    };
-    this.getSeconds = value => {
-      return getSeconds(value);
-    };
-    this.getMilliseconds = value => {
-      return getMilliseconds(value);
-    };
-    this.setYear = (value, year) => {
-      return setYear(value, year);
-    };
-    this.setMonth = (value, month) => {
-      return setMonth(value, month);
-    };
-    this.setDate = (value, date) => {
-      return setDate(value, date);
-    };
-    this.setHours = (value, hours) => {
-      return setHours(value, hours);
-    };
-    this.setMinutes = (value, minutes) => {
-      return setMinutes(value, minutes);
-    };
-    this.setSeconds = (value, seconds) => {
-      return setSeconds(value, seconds);
-    };
-    this.setMilliseconds = (value, milliseconds) => {
-      return setMilliseconds(value, milliseconds);
-    };
-    this.getDaysInMonth = value => {
-      return getDaysInMonth(value);
-    };
-    this.getWeekArray = value => {
-      const start = this.startOfWeek(this.startOfMonth(value));
-      const end = this.endOfWeek(this.endOfMonth(value));
-      let count = 0;
-      let current = start;
-      const nestedWeeks = [];
-      while (this.isBefore(current, end)) {
-        const weekNumber = Math.floor(count / 7);
-        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
-        nestedWeeks[weekNumber].push(current);
-        current = this.addDays(current, 1);
-        count += 1;
-      }
-      return nestedWeeks;
-    };
-    this.getWeekNumber = value => {
-      return getWeek(value, {
-        locale: this.locale
-      });
-    };
-    this.getYearRange = ([start, end]) => {
-      const startDate = this.startOfYear(start);
-      const endDate = this.endOfYear(end);
-      const years = [];
-      let current = startDate;
-      while (this.isBefore(current, endDate)) {
-        years.push(current);
-        current = this.addYears(current, 1);
-      }
-      return years;
-    };
   }
+
+  // TODO: explicit return types can be removed once there is only one date-fns version supported
+  parse = (value, format) => {
+    if (value === '') {
+      return null;
+    }
+    return dateFnsParse(value, format, new Date(), {
+      locale: this.locale
+    });
+  };
+  isValid = value => {
+    if (value == null) {
+      return false;
+    }
+    return isValid(value);
+  };
+  format = (value, formatKey) => {
+    return this.formatByString(value, this.formats[formatKey]);
+  };
+  formatByString = (value, formatString) => {
+    return dateFnsFormat(value, formatString, {
+      locale: this.locale
+    });
+  };
+  isEqual = (value, comparing) => {
+    if (value === null && comparing === null) {
+      return true;
+    }
+    if (value === null || comparing === null) {
+      return false;
+    }
+    return isEqual(value, comparing);
+  };
+  isSameYear = (value, comparing) => {
+    return isSameYear(value, comparing);
+  };
+  isSameMonth = (value, comparing) => {
+    return isSameMonth(value, comparing);
+  };
+  isSameDay = (value, comparing) => {
+    return isSameDay(value, comparing);
+  };
+  isSameHour = (value, comparing) => {
+    return isSameHour(value, comparing);
+  };
+  isAfter = (value, comparing) => {
+    return isAfter(value, comparing);
+  };
+  isAfterYear = (value, comparing) => {
+    return isAfter(value, endOfYear(comparing));
+  };
+  isAfterDay = (value, comparing) => {
+    return isAfter(value, endOfDay(comparing));
+  };
+  isBefore = (value, comparing) => {
+    return isBefore(value, comparing);
+  };
+  isBeforeYear = (value, comparing) => {
+    return isBefore(value, this.startOfYear(comparing));
+  };
+  isBeforeDay = (value, comparing) => {
+    return isBefore(value, this.startOfDay(comparing));
+  };
+  isWithinRange = (value, [start, end]) => {
+    return isWithinInterval(value, {
+      start,
+      end
+    });
+  };
+  startOfYear = value => {
+    return startOfYear(value);
+  };
+  startOfMonth = value => {
+    return startOfMonth(value);
+  };
+  startOfWeek = value => {
+    return startOfWeek(value, {
+      locale: this.locale
+    });
+  };
+  startOfDay = value => {
+    return startOfDay(value);
+  };
+  endOfYear = value => {
+    return endOfYear(value);
+  };
+  endOfMonth = value => {
+    return endOfMonth(value);
+  };
+  endOfWeek = value => {
+    return endOfWeek(value, {
+      locale: this.locale
+    });
+  };
+  endOfDay = value => {
+    return endOfDay(value);
+  };
+  addYears = (value, amount) => {
+    return addYears(value, amount);
+  };
+  addMonths = (value, amount) => {
+    return addMonths(value, amount);
+  };
+  addWeeks = (value, amount) => {
+    return addWeeks(value, amount);
+  };
+  addDays = (value, amount) => {
+    return addDays(value, amount);
+  };
+  addHours = (value, amount) => {
+    return addHours(value, amount);
+  };
+  addMinutes = (value, amount) => {
+    return addMinutes(value, amount);
+  };
+  addSeconds = (value, amount) => {
+    return addSeconds(value, amount);
+  };
+  getYear = value => {
+    return getYear(value);
+  };
+  getMonth = value => {
+    return getMonth(value);
+  };
+  getDate = value => {
+    return getDate(value);
+  };
+  getHours = value => {
+    return getHours(value);
+  };
+  getMinutes = value => {
+    return getMinutes(value);
+  };
+  getSeconds = value => {
+    return getSeconds(value);
+  };
+  getMilliseconds = value => {
+    return getMilliseconds(value);
+  };
+  setYear = (value, year) => {
+    return setYear(value, year);
+  };
+  setMonth = (value, month) => {
+    return setMonth(value, month);
+  };
+  setDate = (value, date) => {
+    return setDate(value, date);
+  };
+  setHours = (value, hours) => {
+    return setHours(value, hours);
+  };
+  setMinutes = (value, minutes) => {
+    return setMinutes(value, minutes);
+  };
+  setSeconds = (value, seconds) => {
+    return setSeconds(value, seconds);
+  };
+  setMilliseconds = (value, milliseconds) => {
+    return setMilliseconds(value, milliseconds);
+  };
+  getDaysInMonth = value => {
+    return getDaysInMonth(value);
+  };
+  getWeekArray = value => {
+    const start = this.startOfWeek(this.startOfMonth(value));
+    const end = this.endOfWeek(this.endOfMonth(value));
+    let count = 0;
+    let current = start;
+    const nestedWeeks = [];
+    while (this.isBefore(current, end)) {
+      const weekNumber = Math.floor(count / 7);
+      nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+      nestedWeeks[weekNumber].push(current);
+      current = this.addDays(current, 1);
+      count += 1;
+    }
+    return nestedWeeks;
+  };
+  getWeekNumber = value => {
+    return getWeek(value, {
+      locale: this.locale
+    });
+  };
+  getYearRange = ([start, end]) => {
+    const startDate = this.startOfYear(start);
+    const endDate = this.endOfYear(end);
+    const years = [];
+    let current = startDate;
+    while (this.isBefore(current, endDate)) {
+      years.push(current);
+      current = this.addYears(current, 1);
+    }
+    return years;
+  };
 }

package/esm/AdapterDateFnsBase/AdapterDateFnsBase.js

@@ -216,67 +216,14 @@ const defaultFormats = {
  * SOFTWARE.
  */
 export class AdapterDateFnsBase {
+  isMUIAdapter = true;
+  isTimezoneCompatible = false;
+  formatTokenMap = (() => formatTokenMap)();
+  escapedCharacters = {
+    start: "'",
+    end: "'"
+  };
   constructor(props) {
-    this.isMUIAdapter = true;
-    this.isTimezoneCompatible = false;
-    this.lib = void 0;
-    this.locale = void 0;
-    this.formats = void 0;
-    this.formatTokenMap = formatTokenMap;
-    this.escapedCharacters = {
-      start: "'",
-      end: "'"
-    };
-    this.longFormatters = void 0;
-    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;
-    };
-    this.getCurrentLocaleCode = () => {
-      // `code` is undefined only in `date-fns` types, but all locales have it
-      return this.locale.code;
-    };
-    // 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 = () => {
-      return /a/.test(this.locale.formatLong.time({
-        width: 'short'
-      }));
-    };
-    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 = this.longFormatters[firstCharacter];
-          return longFormatter(token, this.locale.formatLong);
-        }
-        return token;
-      }).join('');
-    };
-    this.formatNumber = numberToFormat => {
-      return numberToFormat;
-    };
-    this.getDayOfWeek = value => {
-      return value.getDay() + 1;
-    };
     const {
       locale,
       formats,
@@ -288,4 +235,54 @@ export class AdapterDateFnsBase {
     this.longFormatters = longFormatters;
     this.lib = lib || 'date-fns';
   }
+  date = value => {
+    if (typeof value === 'undefined') {
+      return new Date();
+    }
+    if (value === null) {
+      return null;
+    }
+    return new Date(value);
+  };
+  getInvalidDate = () => new Date('Invalid Date');
+  getTimezone = () => {
+    return 'default';
+  };
+  setTimezone = value => {
+    return value;
+  };
+  toJsDate = value => {
+    return value;
+  };
+  getCurrentLocaleCode = () => {
+    // `code` is undefined only in `date-fns` types, but all locales have it
+    return this.locale.code;
+  };
+
+  // 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.
+  is12HourCycleInCurrentLocale = () => {
+    return /a/.test(this.locale.formatLong.time({
+      width: 'short'
+    }));
+  };
+  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 = this.longFormatters[firstCharacter];
+        return longFormatter(token, this.locale.formatLong);
+      }
+      return token;
+    }).join('');
+  };
+  formatNumber = numberToFormat => {
+    return numberToFormat;
+  };
+  getDayOfWeek = value => {
+    return value.getDay() + 1;
+  };
 }