@mui/x-date-pickers 6.2.1 → 6.3.0

package/models/adapters.d.ts

@@ -1,4 +1,4 @@
-import { FieldSectionType } from './fields';
+import { FieldSectionContentType, FieldSectionType } from './fields';
 export interface AdapterFormats<TLibFormatToken = string> {
     /** Localized full date @example "Jan 1, 2019" */
     fullDate: TLibFormatToken;
@@ -59,7 +59,8 @@ export type AdapterUnits = 'years' | 'quarters' | 'months' | 'weeks' | 'days' |
 export type FieldFormatTokenMap = {
     [formatToken: string]: FieldSectionType | {
         sectionType: FieldSectionType;
-        contentType: 'digit' | 'letter';
+        contentType: FieldSectionContentType;
+        maxLength?: number;
     };
 };
 export interface MuiPickersAdapter<TDate> {
@@ -540,17 +541,17 @@ export interface MuiPickersAdapter<TDate> {
     /**
      * Create a nested list with all the days of the month of the given date grouped by week.
      * @template TDate
-     * @param {TDate} date The given date.
+     * @param {TDate} value The given date.
      * @returns {TDate[][]} A nested list with all the days of the month grouped by week.
      */
-    getWeekArray(date: TDate): TDate[][];
+    getWeekArray(value: TDate): TDate[][];
     /**
      * Get the number of the week of the given date.
      * @template TDate
-     * @param {TDate} date The given date.
+     * @param {TDate} value The given date.
      * @returns {number} The number of the week of the given date.
      */
-    getWeekNumber(date: TDate): number;
+    getWeekNumber(value: TDate): number;
     /**
      * Create a list with all the years between the start end the end date.
      * @template TDate

package/models/common.d.ts

@@ -0,0 +1,5 @@
+export interface TimeStepOptions {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+}

package/models/common.js

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

package/models/fields.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { BaseFieldProps } from '../internals/models/fields';
 export type FieldSectionType = 'year' | 'month' | 'day' | 'weekDay' | 'hours' | 'minutes' | 'seconds' | 'meridiem';
+export type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
 export type FieldValueType = 'date' | 'time' | 'date-time';
 export interface FieldSection {
     /**
@@ -13,6 +14,11 @@ export interface FieldSection {
      * For example, in the format `MMMM D, YYYY`, the format of the month section is "MMMM".
      */
     format: string;
+    /**
+     * Maximum length of the value, only defined for "digit" sections.
+     * Will be used to determine how many leading zeros should be added to the value.
+     */
+    maxLength: number | null;
     /**
      * Placeholder rendered when the value of this section is empty.
      */
@@ -25,12 +31,23 @@ export interface FieldSection {
      * Type of content of the section.
      * Will determine if we should apply a digit-based editing or a letter-based editing.
      */
-    contentType: 'digit' | 'letter';
+    contentType: FieldSectionContentType;
     /**
-     * If `true`, the value of this section is supposed to have leading zeroes.
+     * If `true`, the value of this section is supposed to have leading zeroes when parsed by the date library.
      * For example, the value `1` should be rendered as "01" instead of "1".
+     * @deprecated Will be removed in v7, use `hasLeadingZerosInFormat` instead.
      */
     hasLeadingZeros: boolean;
+    /**
+     * If `true`, the value of this section is supposed to have leading zeroes when parsed by the date library.
+     * For example, the value `1` should be rendered as "01" instead of "1".
+     */
+    hasLeadingZerosInFormat: boolean;
+    /**
+     * If `true`, the value of this section is supposed to have leading zeroes when rendered in the input.
+     * For example, the value `1` should be rendered as "01" instead of "1".
+     */
+    hasLeadingZerosInInput: boolean;
     /**
      * If `true`, the section value has been modified since the last time the sections were generated from a valid date.
      * When we can generate a valid date from the section, we don't directly pass it to `onChange`,

package/models/index.d.ts

@@ -2,3 +2,4 @@ export * from './fields';
 export * from './validation';
 export * from './views';
 export * from './adapters';
+export * from './common';

package/models/index.js

@@ -1,4 +1,5 @@
 export * from './fields';
 export * from './validation';
 export * from './views';
-export * from './adapters';
+export * from './adapters';
+export * from './common';

package/modern/AdapterDateFns/AdapterDateFns.js

@@ -0,0 +1,597 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/* eslint-disable class-methods-use-this */
+import addDays from 'date-fns/addDays';
+import addSeconds from 'date-fns/addSeconds';
+import addMinutes from 'date-fns/addMinutes';
+import addHours from 'date-fns/addHours';
+import addWeeks from 'date-fns/addWeeks';
+import addMonths from 'date-fns/addMonths';
+import addYears from 'date-fns/addYears';
+import differenceInYears from 'date-fns/differenceInYears';
+import differenceInQuarters from 'date-fns/differenceInQuarters';
+import differenceInMonths from 'date-fns/differenceInMonths';
+import differenceInWeeks from 'date-fns/differenceInWeeks';
+import differenceInDays from 'date-fns/differenceInDays';
+import differenceInHours from 'date-fns/differenceInHours';
+import differenceInMinutes from 'date-fns/differenceInMinutes';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
+import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+import endOfDay from 'date-fns/endOfDay';
+import endOfWeek from 'date-fns/endOfWeek';
+import endOfYear from 'date-fns/endOfYear';
+import dateFnsFormat from 'date-fns/format';
+import getDate from 'date-fns/getDate';
+import getDay from 'date-fns/getDay';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import getHours from 'date-fns/getHours';
+import getMinutes from 'date-fns/getMinutes';
+import getMonth from 'date-fns/getMonth';
+import getSeconds from 'date-fns/getSeconds';
+import getWeek from 'date-fns/getWeek';
+import getYear from 'date-fns/getYear';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isEqual from 'date-fns/isEqual';
+import isSameDay from 'date-fns/isSameDay';
+import isSameYear from 'date-fns/isSameYear';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameHour from 'date-fns/isSameHour';
+import isValid from 'date-fns/isValid';
+import dateFnsParse from 'date-fns/parse';
+import setDate from 'date-fns/setDate';
+import setHours from 'date-fns/setHours';
+import setMinutes from 'date-fns/setMinutes';
+import setMonth from 'date-fns/setMonth';
+import setSeconds from 'date-fns/setSeconds';
+import setYear from 'date-fns/setYear';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfWeek from 'date-fns/startOfWeek';
+import startOfYear from 'date-fns/startOfYear';
+import parseISO from 'date-fns/parseISO';
+import formatISO from 'date-fns/formatISO';
+import isWithinInterval from 'date-fns/isWithinInterval';
+import defaultLocale from 'date-fns/locale/en-US';
+// @ts-ignore
+import longFormatters from 'date-fns/_lib/format/longFormatters';
+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 = {
+  dayOfMonth: 'd',
+  fullDate: 'PP',
+  fullDateWithWeekday: 'PPPP',
+  fullDateTime: 'PP p',
+  fullDateTime12h: 'PP hh:mm aa',
+  fullDateTime24h: 'PP HH:mm',
+  fullTime: 'p',
+  fullTime12h: 'hh:mm aa',
+  fullTime24h: 'HH:mm',
+  hours12h: 'hh',
+  hours24h: 'HH',
+  keyboardDate: 'P',
+  keyboardDateTime: 'P p',
+  keyboardDateTime12h: 'P hh:mm aa',
+  keyboardDateTime24h: 'P HH:mm',
+  minutes: 'mm',
+  month: 'LLLL',
+  monthAndDate: 'MMMM d',
+  monthAndYear: 'LLLL yyyy',
+  monthShort: 'MMM',
+  weekday: 'EEEE',
+  weekdayShort: 'EEE',
+  normalDate: 'd MMMM',
+  normalDateWithWeekday: 'EEE, MMM d',
+  seconds: 'ss',
+  shortDate: 'MMM d',
+  year: 'yyyy'
+};
+
+/**
+ * Based on `@date-io/date-fns`
+ *
+ * MIT License
+ *
+ * Copyright (c) 2017 Dmitriy Kovalenko
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export class AdapterDateFns {
+  constructor({
+    locale: _locale,
+    formats
+  } = {}) {
+    this.isMUIAdapter = true;
+    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.toJsDate = value => {
+      return value;
+    };
+    this.parseISO = isoString => {
+      return parseISO(isoString);
+    };
+    this.toISO = value => {
+      return formatISO(value, {
+        format: 'extended'
+      });
+    };
+    this.parse = (value, format) => {
+      if (value === '') {
+        return null;
+      }
+      return dateFnsParse(value, format, new Date(), {
+        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[firstCharacter];
+          const locale = this.locale || defaultLocale;
+          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 isValid(this.date(value));
+    };
+    this.format = (value, formatKey) => {
+      return this.formatByString(value, this.formats[formatKey]);
+    };
+    this.formatByString = (value, formatString) => {
+      return dateFnsFormat(value, formatString, {
+        locale: this.locale
+      });
+    };
+    this.formatNumber = numberToFormat => {
+      return numberToFormat;
+    };
+    this.getDiff = (value, comparing, unit) => {
+      switch (unit) {
+        case 'years':
+          return differenceInYears(value, this.date(comparing));
+        case 'quarters':
+          return differenceInQuarters(value, this.date(comparing));
+        case 'months':
+          return differenceInMonths(value, this.date(comparing));
+        case 'weeks':
+          return differenceInWeeks(value, this.date(comparing));
+        case 'days':
+          return differenceInDays(value, this.date(comparing));
+        case 'hours':
+          return differenceInHours(value, this.date(comparing));
+        case 'minutes':
+          return differenceInMinutes(value, this.date(comparing));
+        case 'seconds':
+          return differenceInSeconds(value, this.date(comparing));
+        default:
+          {
+            return differenceInMilliseconds(value, this.date(comparing));
+          }
+      }
+    };
+    this.isEqual = (value, comparing) => {
+      if (value === null && comparing === null) {
+        return true;
+      }
+      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, startOfYear(comparing));
+    };
+    this.isBeforeDay = (value, comparing) => {
+      return isBefore(value, 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.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.getDaysInMonth = value => {
+      return getDaysInMonth(value);
+    };
+    this.getNextMonth = value => {
+      return addMonths(value, 1);
+    };
+    this.getPreviousMonth = value => {
+      return addMonths(value, -1);
+    };
+    this.getMonthArray = value => {
+      const firstMonth = startOfYear(value);
+      const monthArray = [firstMonth];
+      while (monthArray.length < 12) {
+        const prevMonth = monthArray[monthArray.length - 1];
+        monthArray.push(this.getNextMonth(prevMonth));
+      }
+      return monthArray;
+    };
+    this.mergeDateAndTime = (dateParam, timeParam) => {
+      return this.setSeconds(this.setMinutes(this.setHours(dateParam, this.getHours(timeParam)), this.getMinutes(timeParam)), this.getSeconds(timeParam));
+    };
+    this.getWeekdays = () => {
+      const now = new Date();
+      return eachDayOfInterval({
+        start: startOfWeek(now, {
+          locale: this.locale
+        }),
+        end: endOfWeek(now, {
+          locale: this.locale
+        })
+      }).map(day => this.formatByString(day, 'EEEEEE'));
+    };
+    this.getWeekArray = value => {
+      const start = startOfWeek(startOfMonth(value), {
+        locale: this.locale
+      });
+      const end = endOfWeek(endOfMonth(value), {
+        locale: this.locale
+      });
+      let count = 0;
+      let current = start;
+      const nestedWeeks = [];
+      let lastDay = null;
+      while (isBefore(current, end)) {
+        const weekNumber = Math.floor(count / 7);
+        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+        const day = getDay(current);
+        if (lastDay !== day) {
+          lastDay = day;
+          nestedWeeks[weekNumber].push(current);
+          count += 1;
+        }
+        current = addDays(current, 1);
+      }
+      return nestedWeeks;
+    };
+    this.getWeekNumber = value => {
+      return getWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.getYearRange = (start, end) => {
+      const startDate = startOfYear(start);
+      const endDate = endOfYear(end);
+      const years = [];
+      let current = startDate;
+      while (isBefore(current, endDate)) {
+        years.push(current);
+        current = addYears(current, 1);
+      }
+      return years;
+    };
+    this.getMeridiemText = ampm => {
+      return ampm === 'am' ? 'AM' : 'PM';
+    };
+    this.locale = _locale;
+    this.formats = _extends({}, defaultFormats, formats);
+  }
+}