@mui/x-date-pickers 6.0.3 → 6.0.4

package/modern/locales/svSE.js

@@ -16,22 +16,20 @@ const svSEPickers = {
   okButtonLabel: 'OK',
   todayButtonLabel: 'Idag',
   // Toolbar titles
-  // datePickerToolbarTitle: 'Select date',
-  // dateTimePickerToolbarTitle: 'Select date & time',
-  // timePickerToolbarTitle: 'Select time',
-  // dateRangePickerToolbarTitle: 'Select date range',
-
+  datePickerToolbarTitle: 'Välj datum',
+  dateTimePickerToolbarTitle: 'Välj datum & tid',
+  timePickerToolbarTitle: 'Välj tid',
+  dateRangePickerToolbarTitle: 'Välj datumintervall',
   // Clock labels
   clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Ingen tid vald' : `Vald tid är ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timmar`,
   minutesClockNumberText: minutes => `${minutes} minuter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Vecka nummer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Vecka ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',

package/modern/models/fields.js

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

package/modern/models/index.js

@@ -1 +1,3 @@
-export {};
+export * from './fields';
+export * from './validation';
+export * from './views';

package/modern/models/validation.js

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

package/modern/models/views.js

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

package/node/AdapterDateFnsJalali/index.js

@@ -39,6 +39,74 @@ const formatTokenMap = {
   // Day of the month
   d: 'day',
   dd: 'day',
+  do: 'day',
+  // 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: 'weekDay',
+  ii: 'weekDay',
+  iii: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  iiii: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  e: 'weekDay',
+  ee: 'weekDay',
+  eee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  eeee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  eeeee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  eeeeee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  c: 'weekDay',
+  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',

package/node/AdapterLuxon/index.js

@@ -92,12 +92,21 @@ class AdapterLuxon extends _luxon2.default {
       if (!_luxon.DateTime.expandFormat) {
         throw Error('Your luxon version does not support `expandFormat`. Consider upgrading it to v3.0.2');
       }
+      // Extract escaped section to avoid entending them
+      const longFormatRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
+      return format.match(longFormatRegexp).map(token => {
+        const firstCharacter = token[0];
+        if (firstCharacter === "'") {
+          return token;
+        }
+        return _luxon.DateTime.expandFormat(token, {
+          locale: this.locale
+        });
+      }).join('')
       // The returned format can contain `yyyyy` which means year between 4 and 6 digits.
       // This value is supported by luxon parser but not luxon formatter.
       // To avoid conflicts, we replace it by 4 digits which is enough for most use-cases.
-      return _luxon.DateTime.expandFormat(format, {
-        locale: this.locale
-      }).replace('yyyyy', 'yyyy');
+      .replace('yyyyy', 'yyyy');
     };
     // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.0.3
+ * @mui/x-date-pickers v6.0.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/demo/DemoContainer.js

@@ -109,14 +109,22 @@ function DemoContainer(props) {
   if (childrenTypes.has('UI-view')) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
-    sx = (0, _extends2.default)({}, sx, {
-      [`& > .${_TextField.textFieldClasses.root}`]: {
-        minWidth: {
-          xs: 300,
-          md: 400
+    if (!childrenSupportedSections.has('date-time')) {
+      sx = (0, _extends2.default)({}, sx, {
+        [`& > .${_TextField.textFieldClasses.root}`]: {
+          minWidth: 300
         }
-      }
-    });
+      });
+    } else {
+      sx = (0, _extends2.default)({}, sx, {
+        [`& > .${_TextField.textFieldClasses.root}`]: {
+          minWidth: {
+            xs: 300,
+            md: 400
+          }
+        }
+      });
+    }
   } else if (childrenSupportedSections.has('date-time')) {
     sx = (0, _extends2.default)({}, sx, {
       [`& > .${_TextField.textFieldClasses.root}`]: {

package/node/internals/hooks/useField/useField.js

@@ -32,7 +32,8 @@ const useField = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionsValueBoundaries
+    sectionsValueBoundaries,
+    placeholder
   } = (0, _useFieldState.useFieldState)(params);
   const {
     applyCharacterEditing,
@@ -68,7 +69,8 @@ const useField = params => {
   const handleRef = (0, _useForkRef.default)(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
   const theme = (0, _styles.useTheme)();
-  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, theme.direction === 'rtl'), [theme.direction, state.sections]);
+  const isRTL = theme.direction === 'rtl';
+  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRTL), [state.sections, isRTL]);
   const syncSelectionFromDOM = () => {
     if (readOnly) {
       setSelectedSections(null);
@@ -159,7 +161,7 @@ const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections));
+      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -264,7 +266,7 @@ const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.activeDate);
+          const newSectionValue = (0, _useField.adjustSectionValue)(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date);
           updateSectionValue({
             activeSection,
             newSectionValue,
@@ -330,7 +332,7 @@ const useField = params => {
     }
   }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections), [state.sections, fieldValueManager, state.tempValueStrAndroid]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';
@@ -357,7 +359,7 @@ const useField = params => {
     setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
   }));
   return (0, _extends2.default)({
-    placeholder: state.placeholder,
+    placeholder,
     autoComplete: 'off'
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,

package/node/internals/hooks/useField/useField.utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateSections = exports.splitFormatIntoSections = exports.mergeDateIntoReferenceDate = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionOrder = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionHaveLeadingZeros = exports.createDateStrForInputFromSections = exports.cleanString = exports.cleanDigitSectionValue = exports.clampDaySection = exports.changeSectionValueFormat = exports.adjustSectionValue = exports.addPositionPropertiesToSections = void 0;
+exports.validateSections = exports.splitFormatIntoSections = exports.mergeDateIntoReferenceDate = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionHaveLeadingZeros = exports.createDateStrForInputFromSections = exports.cleanString = exports.cleanDigitSectionValue = exports.clampDaySectionIfPossible = exports.changeSectionValueFormat = exports.adjustSectionValue = exports.addPositionPropertiesToSections = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
@@ -159,33 +159,33 @@ const adjustSectionValue = (utils, section, keyCode, sectionsValueBoundaries, ac
   return adjustLetterSection();
 };
 exports.adjustSectionValue = adjustSectionValue;
-const getSectionVisibleValue = (section, willBeRenderedInInput) => {
-  const value = section.value || section.placeholder;
+const getSectionVisibleValue = (section, target) => {
+  let value = section.value || section.placeholder;
 
   // In the input, we add an empty character at the end of each section without leading zeros.
   // This makes sure that `onChange` will always be fired.
   // Otherwise, when your input value equals `1/dd/yyyy` (format `M/DD/YYYY` on DayJs),
   // If you press `1`, on the first section, the new value is also `1/dd/yyyy`,
   // So the browser will not fire the input `onChange`.
-  // Adding the ltr mark is not a problem because it's only for digit (which are always ltr)
-  // The \u2068 and \u2069 are cleaned, but not the \u200e to notice that an update with same digit occurs
-  if (willBeRenderedInInput && section.contentType === 'digit' && !section.hasLeadingZeros && value.length === 1) {
-    return `\u2068${value}\u200e\u2069`;
+  const shouldAddInvisibleSpace = ['input-rtl', 'input-ltr'].includes(target) && section.contentType === 'digit' && !section.hasLeadingZeros && value.length === 1;
+  if (shouldAddInvisibleSpace) {
+    value = `${value}\u200e`;
   }
-  if (willBeRenderedInInput) {
-    return `\u2068${value}\u2069`;
+  if (target === 'input-rtl') {
+    value = `\u2068${value}\u2069`;
   }
   return value;
 };
+exports.getSectionVisibleValue = getSectionVisibleValue;
 const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 exports.cleanString = cleanString;
-const addPositionPropertiesToSections = sections => {
+const addPositionPropertiesToSections = (sections, isRTL) => {
   let position = 0;
-  let positionInInput = 1;
+  let positionInInput = isRTL ? 1 : 0;
   const newSections = [];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, true);
+    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
     const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
     const sectionLength = cleanString(sectionStr).length;
     const sectionLengthInInput = sectionStr.length;
@@ -333,10 +333,6 @@ const splitFormatIntoSections = (utils, localeText, format, date) => {
     if (token === '') {
       return null;
     }
-    const expandedToken = utils.expandFormat(token);
-    if (expandedToken !== token) {
-      return expandedToken;
-    }
     const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
     const sectionValue = date == null || !utils.isValid(date) ? '' : utils.formatByString(date, token);
     const hasLeadingZeros = doesSectionHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
@@ -351,39 +347,50 @@ const splitFormatIntoSections = (utils, localeText, format, date) => {
     }));
     return null;
   };
-  const splitFormat = token => {
-    const escapedParts = getEscapedPartsFromFormat(utils, token);
-    let currentTokenValue = '';
-    for (let i = 0; i < token.length; i += 1) {
-      const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-      const char = token[i];
-      const isEscapedChar = escapedPartOfCurrentChar != null;
-      if (!isEscapedChar && char.match(/([A-Za-z]+)/)) {
-        currentTokenValue += char;
-      } else {
-        // If we are on the opening or closing character of an escaped part of the format,
-        // Then we ignore this character.
-        const isEscapeBoundary = isEscapedChar && escapedPartOfCurrentChar?.start === i || escapedPartOfCurrentChar?.end === i;
-        if (!isEscapeBoundary) {
-          const expandedToken = commitToken(currentTokenValue);
-          if (expandedToken != null) {
-            splitFormat(expandedToken);
-          }
-          currentTokenValue = '';
-          if (sections.length === 0) {
-            startSeparator += char;
-          } else {
-            sections[sections.length - 1].endSeparator += char;
-          }
+
+  // Expand the provided format
+  let formatExpansionOverflow = 10;
+  let prevFormat = format;
+  let nextFormat = utils.expandFormat(format);
+  while (nextFormat !== prevFormat) {
+    prevFormat = nextFormat;
+    nextFormat = utils.expandFormat(prevFormat);
+    formatExpansionOverflow -= 1;
+    if (formatExpansionOverflow < 0) {
+      throw new Error('MUI: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component');
+    }
+  }
+  const expandedFormat = nextFormat;
+
+  // Get start/end indexes of escaped sections
+  const escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
+
+  // This RegExp test if the beginning of a string correspond to a supported token
+  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).join('|')})`);
+  let currentTokenValue = '';
+  for (let i = 0; i < expandedFormat.length; i += 1) {
+    const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
+    const char = expandedFormat[i];
+    const isEscapedChar = escapedPartOfCurrentChar != null;
+    const potentialToken = `${currentTokenValue}${expandedFormat.slice(i)}`;
+    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && isTokenStartRegExp.test(potentialToken)) {
+      currentTokenValue += char;
+    } else {
+      // If we are on the opening or closing character of an escaped part of the format,
+      // Then we ignore this character.
+      const isEscapeBoundary = isEscapedChar && escapedPartOfCurrentChar?.start === i || escapedPartOfCurrentChar?.end === i;
+      if (!isEscapeBoundary) {
+        commitToken(currentTokenValue);
+        currentTokenValue = '';
+        if (sections.length === 0) {
+          startSeparator += char;
+        } else {
+          sections[sections.length - 1].endSeparator += char;
         }
       }
     }
-    const expandedToken = commitToken(currentTokenValue);
-    if (expandedToken != null) {
-      splitFormat(expandedToken);
-    }
-  };
-  splitFormat(format);
+  }
+  commitToken(currentTokenValue);
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
@@ -418,7 +425,7 @@ const getDateFromDateSections = (utils, sections) => {
     const shouldSkip = shouldSkipWeekDays && section.type === 'weekDay';
     if (!shouldSkip) {
       sectionFormats.push(section.format);
-      sectionValues.push(getSectionVisibleValue(section, false));
+      sectionValues.push(getSectionVisibleValue(section, 'non-input'));
     }
   }
   const formatWithoutSeparator = sectionFormats.join(' ');
@@ -426,15 +433,19 @@ const getDateFromDateSections = (utils, sections) => {
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
 exports.getDateFromDateSections = getDateFromDateSections;
-const createDateStrForInputFromSections = sections => {
-  const formattedArray = sections.map(section => `${section.startSeparator}${getSectionVisibleValue(section, true)}${section.endSeparator}`);
+const createDateStrForInputFromSections = (sections, isRTL) => {
+  const formattedSections = sections.map(section => `${section.startSeparator}${getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr')}${section.endSeparator}`);
+  const dateStr = formattedSections.join('');
+  if (!isRTL) {
+    return dateStr;
+  }
 
   // \u2066: start left-to-right isolation
   // \u2067: start right-to-left isolation
   // \u2068: start first strong character isolation
   // \u2069: pop isolation
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
-  return `\u2066${formattedArray.join('')}\u2069`;
+  return `\u2066${dateStr}\u2069`;
 };
 exports.createDateStrForInputFromSections = createDateStrForInputFromSections;
 const getSectionsBoundaries = utils => {
@@ -606,7 +617,15 @@ const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referen
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
 const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
 exports.isAndroid = isAndroid;
-const clampDaySection = (utils, sections, sectionsValueBoundaries) => {
+const clampDaySectionIfPossible = (utils, sections, sectionsValueBoundaries) => {
+  // We can only clamp the day value if:
+  // 1. if all the sections are filled (except the week day section which can be empty)
+  // 2. there is a day section
+  const canClamp = sections.every(section => section.type === 'weekDay' || section.value !== '') && sections.some(section => section.type === 'day');
+  if (!canClamp) {
+    return null;
+  }
+
   // We try to generate a valid date representing the start of the month of the invalid date typed by the user.
   const sectionsForStartOfMonth = sections.map(section => {
     if (section.type !== 'day') {
@@ -646,7 +665,7 @@ const clampDaySection = (utils, sections, sectionsValueBoundaries) => {
     });
   });
 };
-exports.clampDaySection = clampDaySection;
+exports.clampDaySectionIfPossible = clampDaySectionIfPossible;
 const getSectionOrder = (sections, isRTL) => {
   const neighbors = {};
   if (!isRTL) {