@mui/x-date-pickers 6.0.3 → 6.0.4

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

@@ -147,32 +147,31 @@ export const adjustSectionValue = (utils, section, keyCode, sectionsValueBoundar
   }
   return adjustLetterSection();
 };
-const getSectionVisibleValue = (section, willBeRenderedInInput) => {
-  const value = section.value || section.placeholder;
+export 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;
 };
 export const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = sections => {
+export 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;
@@ -317,10 +316,6 @@ export 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);
@@ -335,39 +330,50 @@ export 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;
@@ -401,22 +407,26 @@ export 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(' ');
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForInputFromSections = sections => {
-  const formattedArray = sections.map(section => `${section.startSeparator}${getSectionVisibleValue(section, true)}${section.endSeparator}`);
+export 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`;
 };
 export const getSectionsBoundaries = utils => {
   const today = utils.date();
@@ -583,7 +593,15 @@ export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections,
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
-export const clampDaySection = (utils, sections, sectionsValueBoundaries) => {
+export 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') {

package/modern/internals/hooks/useField/useFieldState.js

@@ -1,12 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
+import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
-import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySection, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
+import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySectionIfPossible, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
 export const useFieldState = params => {
   const utils = useUtils();
   const localeText = useLocaleText();
   const adapter = useLocalizationContext();
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
   const {
     valueManager,
     fieldValueManager,
@@ -25,14 +28,14 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(fieldValueManager.getSectionsFromValue(utils, localeText, null, valueManager.emptyValue, format)), [fieldValueManager, format, localeText, utils, valueManager.emptyValue]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date)), [fieldValueManager, format, localeText, isRTL, utils]);
+  const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
-    const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
+    const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
     return {
       sections,
       value: valueFromTheOutside,
-      placeholder,
       referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils)),
       tempValueStrAndroid: null
     };
@@ -78,11 +81,11 @@ export const useFieldState = params => {
   }, [selectedSections, state.sections]);
   const publishValue = ({
     value,
-    referenceValue
-  }, sections = state.sections) => {
-    const newSections = fieldValueManager.getSectionsFromValue(utils, localeText, sections, value, format);
+    referenceValue,
+    sections
+  }) => {
     setState(prevState => _extends({}, prevState, {
-      sections: newSections,
+      sections,
       value,
       referenceValue,
       tempValueStrAndroid: null
@@ -106,7 +109,7 @@ export const useFieldState = params => {
       value: newSectionValue,
       modified: true
     });
-    return addPositionPropertiesToSections(newSections);
+    return addPositionPropertiesToSections(newSections, isRTL);
   };
   const clearValue = () => {
     if (valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue)) {
@@ -114,8 +117,9 @@ export const useFieldState = params => {
     }
     publishValue({
       value: valueManager.emptyValue,
-      referenceValue: state.referenceValue
-    }, null);
+      referenceValue: state.referenceValue,
+      sections: getSectionsFromValue(valueManager.emptyValue)
+    });
   };
   const clearActiveSection = () => {
     if (selectedSectionIndexes == null) {
@@ -126,16 +130,17 @@ export const useFieldState = params => {
       return;
     }
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-    const activeDateSections = fieldValueManager.getActiveDateSections(state.sections, activeSection);
-    const nonEmptySectionCountBefore = activeDateSections.filter(section => section.value !== '').length;
+    const nonEmptySectionCountBefore = activeDateManager.getSections(state.sections).filter(section => section.value !== '').length;
     const isTheOnlyNonEmptySection = nonEmptySectionCountBefore === 1;
     const newSections = setSectionValue(selectedSectionIndexes.startIndex, '');
     const newActiveDate = isTheOnlyNonEmptySection ? null : utils.date(new Date(''));
-    const newValue = activeDateManager.getNewValueFromNewActiveDate(newActiveDate);
-    if ((newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.activeDate != null && !utils.isValid(activeDateManager.activeDate))) {
-      publishValue(newValue, newSections);
+    const newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
+    if ((newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date))) {
+      publishValue(_extends({}, newValues, {
+        sections: newSections
+      }));
     } else {
-      setState(prevState => _extends({}, prevState, newValue, {
+      setState(prevState => _extends({}, prevState, newValues, {
         sections: newSections,
         tempValueStrAndroid: null
       }));
@@ -154,7 +159,8 @@ export const useFieldState = params => {
     const newReferenceValue = fieldValueManager.updateReferenceValue(utils, newValue, state.referenceValue);
     publishValue({
       value: newValue,
-      referenceValue: newReferenceValue
+      referenceValue: newReferenceValue,
+      sections: getSectionsFromValue(newValue, state.sections)
     });
   };
   const updateSectionValue = ({
@@ -162,73 +168,92 @@ export const useFieldState = params => {
     newSectionValue,
     shouldGoToNextSection
   }) => {
-    const commit = ({
-      values,
-      sections,
-      shouldPublish
-    }) => {
-      if (shouldGoToNextSection && selectedSectionIndexes && selectedSectionIndexes.startIndex < state.sections.length - 1) {
-        setSelectedSections(selectedSectionIndexes.startIndex + 1);
-      } else if (selectedSectionIndexes && selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
-        setSelectedSections(selectedSectionIndexes.startIndex);
-      }
-      if (shouldPublish) {
-        publishValue(values, sections);
-      } else {
-        setState(prevState => _extends({}, prevState, values, {
-          sections: sections ?? state.sections,
-          tempValueStrAndroid: null
-        }));
-      }
-    };
+    /**
+     * 1. Decide which section should be focused
+     */
+    if (shouldGoToNextSection && selectedSectionIndexes && selectedSectionIndexes.startIndex < state.sections.length - 1) {
+      setSelectedSections(selectedSectionIndexes.startIndex + 1);
+    } else if (selectedSectionIndexes && selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
+      setSelectedSections(selectedSectionIndexes.startIndex);
+    }
+
+    /**
+     * 2. Try to build a valid date from the new section value
+     */
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
-    const activeDateSections = fieldValueManager.getActiveDateSections(newSections, activeSection);
-    let newActiveDate = getDateFromDateSections(utils, activeDateSections);
+    const newActiveDateSections = activeDateManager.getSections(newSections);
+    let newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
+    let shouldRegenSections = false;
 
-    // When all the sections are filled but the date is invalid, it can be because the month has fewer days than asked.
-    // We can try to set the day to the maximum boundary.
-    if (!utils.isValid(newActiveDate) && activeDateSections.every(section => section.type === 'weekDay' || section.value !== '') && activeDateSections.some(section => section.type === 'day')) {
-      const cleanSections = clampDaySection(utils, activeDateSections, sectionsValueBoundaries);
-      if (cleanSections != null) {
-        newActiveDate = getDateFromDateSections(utils, cleanSections);
+    /**
+     * If the date is invalid,
+     * Then we can try to clamp the day section to see if that produces a valid date.
+     * This can be useful if the month has fewer days than the day value currently provided.
+     */
+    if (!utils.isValid(newActiveDate)) {
+      const clampedSections = clampDaySectionIfPossible(utils, newActiveDateSections, sectionsValueBoundaries);
+      if (clampedSections != null) {
+        shouldRegenSections = true;
+        newActiveDate = getDateFromDateSections(utils, clampedSections);
       }
     }
+    let values;
+    let shouldPublish;
+
+    /**
+     * If the new date is valid,
+     * Then we merge the value of the modified sections into the reference date.
+     * This makes sure that we don't lose some information of the initial date (like the time on a date field).
+     */
     if (newActiveDate != null && utils.isValid(newActiveDate)) {
-      const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, activeDateSections, activeDateManager.referenceActiveDate, true);
-      return commit({
-        values: activeDateManager.getNewValueFromNewActiveDate(mergedDate),
-        shouldPublish: true
-      });
+      const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
+      values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
+      shouldPublish = true;
+    } else {
+      values = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
+      shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
     }
-    return commit({
-      values: activeDateManager.getNewValueFromNewActiveDate(newActiveDate),
-      sections: newSections,
-      shouldPublish: (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.activeDate != null && !utils.isValid(activeDateManager.activeDate))
-    });
+
+    /**
+     * If the value has been modified (to clamp the day).
+     * Then we need to re-generate the sections to make sure they also have this change.
+     */
+    const sections = shouldRegenSections ? getSectionsFromValue(values.value, state.sections) : newSections;
+
+    /**
+     * Publish or update the internal state with the new value and sections.
+     */
+    if (shouldPublish) {
+      return publishValue(_extends({}, values, {
+        sections
+      }));
+    }
+    return setState(prevState => _extends({}, prevState, values, {
+      sections,
+      tempValueStrAndroid: null
+    }));
   };
   const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, prev, {
     tempValueStrAndroid
   }));
   React.useEffect(() => {
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
-      const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
       setState(prevState => _extends({}, prevState, {
         value: valueFromTheOutside,
         referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),
-        sections
+        sections: getSectionsFromValue(valueFromTheOutside)
       }));
     }
   }, [valueFromTheOutside]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
-    const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, state.value, format);
+    const sections = getSectionsFromValue(state.value);
     validateSections(sections, valueType);
     setState(prevState => _extends({}, prevState, {
-      sections,
-      placeholder
+      sections
     }));
-  }, [format, utils.locale, placeholder]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [format, utils.locale]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     state,
@@ -239,6 +264,7 @@ export const useFieldState = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionsValueBoundaries
+    sectionsValueBoundaries,
+    placeholder
   };
 };

package/modern/internals/hooks/useViews.js

@@ -24,6 +24,8 @@ export function useViews({
       }
     }
   }
+  const previousOpenTo = React.useRef(openTo);
+  const previousViews = React.useRef(views);
   const defaultView = React.useRef(views.includes(openTo) ? openTo : views[0]);
   const [view, setView] = useControlled({
     name: 'useViews',
@@ -38,6 +40,12 @@ export function useViews({
     controlled: inFocusedView,
     default: defaultFocusedView.current
   });
+  React.useEffect(() => {
+    // Update the current view when `openTo` or `views` props change
+    if (previousOpenTo.current && previousOpenTo.current !== openTo || previousViews.current && previousViews.current.some(previousView => !views.includes(previousView))) {
+      setView(views.includes(openTo) ? openTo : views[0]);
+    }
+  }, [openTo, setView, view, views]);
   const viewIndex = views.indexOf(view);
   const previousView = views[viewIndex - 1] ?? null;
   const nextView = views[viewIndex + 1] ?? null;

package/modern/internals/index.js

@@ -9,7 +9,7 @@ export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/p
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';

package/modern/internals/models/index.js

@@ -1,3 +1,2 @@
-export * from './views';
 export * from './fields';
 export * from './muiPickersAdapter';

package/modern/internals/utils/utils.js

@@ -5,7 +5,7 @@ export function arrayIncludes(array, itemOrItems) {
   }
   return array.indexOf(itemOrItems) !== -1;
 }
-export const onSpaceOrEnter = (innerFn, onFocus) => event => {
+export const onSpaceOrEnter = (innerFn, externalEvent) => event => {
   if (event.key === 'Enter' || event.key === ' ') {
     innerFn(event);
 
@@ -13,8 +13,8 @@ export const onSpaceOrEnter = (innerFn, onFocus) => event => {
     event.preventDefault();
     event.stopPropagation();
   }
-  if (onFocus) {
-    onFocus(event);
+  if (externalEvent) {
+    externalEvent(event);
   }
 };
 export const executeInTheNextEventLoopTick = fn => {

package/modern/internals/utils/valueManagers.js

@@ -1,5 +1,5 @@
 import { areDatesEqual, replaceInvalidDateByNull } from './date-utils';
-import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections } from '../hooks/useField/useField.utils';
+import { addPositionPropertiesToSections, createDateStrForInputFromSections } from '../hooks/useField/useField.utils';
 export const singleItemValueManager = {
   emptyValue: null,
   getTodayValue: utils => utils.date(),
@@ -10,19 +10,19 @@ export const singleItemValueManager = {
 };
 export const singleItemFieldValueManager = {
   updateReferenceValue: (utils, value, prevReferenceValue) => value == null || !utils.isValid(value) ? prevReferenceValue : value,
-  getSectionsFromValue: (utils, localeText, prevSections, date, format) => {
+  getSectionsFromValue: (utils, date, prevSections, isRTL, getSectionsFromDate) => {
     const shouldReUsePrevDateSections = !utils.isValid(date) && !!prevSections;
     if (shouldReUsePrevDateSections) {
       return prevSections;
     }
-    return addPositionPropertiesToSections(splitFormatIntoSections(utils, localeText, format, date));
+    return addPositionPropertiesToSections(getSectionsFromDate(date), isRTL);
   },
-  getValueStrFromSections: sections => createDateStrForInputFromSections(sections),
-  getActiveDateSections: sections => sections,
+  getValueStrFromSections: createDateStrForInputFromSections,
   getActiveDateManager: (utils, state) => ({
-    activeDate: state.value,
-    referenceActiveDate: state.referenceValue,
-    getNewValueFromNewActiveDate: newActiveDate => ({
+    date: state.value,
+    referenceDate: state.referenceValue,
+    getSections: sections => sections,
+    getNewValuesFromNewActiveDate: newActiveDate => ({
       value: newActiveDate,
       referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : newActiveDate
     })

package/modern/locales/daDK.js

@@ -0,0 +1,56 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+
+// maps TimeView to its translation
+const timeViews = {
+  hours: 'Timer',
+  minutes: 'Minutter',
+  seconds: 'Sekunder'
+};
+const daDKPickers = {
+  // Calendar navigation
+  previousMonth: 'Forrige måned',
+  nextMonth: 'Næste måned',
+  // View navigation
+  openPreviousView: 'åben forrige visning',
+  openNextView: 'åben næste visning',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'årsvisning er åben, skift til kalendervisning' : 'kalendervisning er åben, skift til årsvisning',
+  // DateRange placeholders
+  start: 'Start',
+  end: 'Slut',
+  // Action bar
+  cancelButtonLabel: 'Annuller',
+  clearButtonLabel: 'Ryd',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'I dag',
+  // Toolbar titles
+  datePickerToolbarTitle: 'Vælg dato',
+  dateTimePickerToolbarTitle: 'Vælg dato & tidspunkt',
+  timePickerToolbarTitle: 'Vælg tidspunkt',
+  dateRangePickerToolbarTitle: 'Vælg datointerval',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Vælg ${timeViews[view] ?? view}. ${time === null ? 'Intet tidspunkt valgt' : `Valgte tidspunkt er ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} timer`,
+  minutesClockNumberText: minutes => `${minutes} minutter`,
+  secondsClockNumberText: seconds => `${seconds} sekunder`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: 'Ugenummer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Uge ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${utils.format(value, 'fullDate')}` : 'Vælg dato',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
+  // Table labels
+  timeTableLabel: 'vælg tidspunkt',
+  dateTableLabel: 'vælg dato',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa'
+};
+export const daDK = getPickersLocalization(daDKPickers);

package/modern/locales/nbNO.js

@@ -16,22 +16,20 @@ const nbNOPickers = {
   okButtonLabel: 'OK',
   todayButtonLabel: 'I dag',
   // Toolbar titles
-  // datePickerToolbarTitle: 'Select date',
-  // dateTimePickerToolbarTitle: 'Select date & time',
-  // timePickerToolbarTitle: 'Select time',
-  // dateRangePickerToolbarTitle: 'Select date range',
-
+  datePickerToolbarTitle: 'Velg dato',
+  dateTimePickerToolbarTitle: 'Velg dato & klokkeslett',
+  timePickerToolbarTitle: 'Velg klokkeslett',
+  dateRangePickerToolbarTitle: 'Velg datoperiode',
   // Clock labels
   clockLabelText: (view, time, adapter) => `Velg ${view}. ${time === null ? 'Ingen tid valgt' : `Valgt tid er ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timer`,
   minutesClockNumberText: minutes => `${minutes} minutter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Ukenummer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Uke ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velg dato, valgt dato er ${utils.format(value, 'fullDate')}` : 'Velg dato',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velg tid, valgt tid er ${utils.format(value, 'fullTime')}` : 'Velg tid',