@mui/x-date-pickers 8.0.0-alpha.8 → 8.0.0-beta.0

package/internals/hooks/useField/useField.types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,8 +1,8 @@
-import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from './useField.types';
-import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from '../../../models';
-import { PickerValidValue } from '../../models';
+import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
+import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
+import { PickerValidValue } from "../../models/index.js";
 export declare const getDateSectionConfigFromFormatToken: (utils: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
-    maxLength: number | undefined;
+  maxLength: number | undefined;
 };
 export declare const getDaysInWeekStr: (utils: MuiPickersAdapter, format: string) => string[];
 export declare const getLetterEditingOptions: (utils: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
@@ -19,7 +19,7 @@ export declare const isStringNumber: (valueStr: string, localizedDigits: string[
 export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
 export declare const cleanDigitSectionValue: (utils: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
 export declare const adjustSectionValue: <TValue extends PickerValidValue>(utils: MuiPickersAdapter, timezone: PickersTimezone, section: InferFieldSection<TValue>, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries, localizedDigits: string[], activeDate: PickerValidDate | null, stepsAttributes?: {
-    minutesStep?: number;
+  minutesStep?: number;
 }) => string;
 export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
 export declare const changeSectionValueFormat: (utils: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
@@ -38,4 +38,4 @@ export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
 export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
 export declare const getSectionValueText: (section: FieldSection, utils: MuiPickersAdapter) => string | undefined;
-export declare const getSectionValueNow: (section: FieldSection, utils: MuiPickersAdapter) => number | undefined;
+export declare const getSectionValueNow: (section: FieldSection, utils: MuiPickersAdapter) => number | undefined;

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

@@ -1,5 +1,11 @@
-import { getMonthsInYear } from "../../utils/date-utils.js";
-export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionValueText = exports.getSectionValueNow = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForV7HiddenInputFromSections = exports.createDateStrForV6InputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.adjustSectionValue = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
+var _dateUtils = require("../../utils/date-utils");
+const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
   if (config == null) {
     throw new Error([`MUI X: The token "${formatToken}" is not supported by the Date and Time Pickers.`, 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
@@ -17,6 +23,7 @@ export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
     maxLength: config.maxLength
   };
 };
+exports.getDateSectionConfigFromFormatToken = getDateSectionConfigFromFormatToken;
 const getDeltaFromKeyCode = keyCode => {
   switch (keyCode) {
     case 'ArrowUp':
@@ -31,7 +38,7 @@ const getDeltaFromKeyCode = keyCode => {
       return 0;
   }
 };
-export const getDaysInWeekStr = (utils, format) => {
+const getDaysInWeekStr = (utils, format) => {
   const elements = [];
   const now = utils.date(undefined, 'default');
   const startDate = utils.startOfWeek(now);
@@ -43,11 +50,12 @@ export const getDaysInWeekStr = (utils, format) => {
   }
   return elements.map(weekDay => utils.formatByString(weekDay, format));
 };
-export const getLetterEditingOptions = (utils, timezone, sectionType, format) => {
+exports.getDaysInWeekStr = getDaysInWeekStr;
+const getLetterEditingOptions = (utils, timezone, sectionType, format) => {
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.date(undefined, timezone)).map(month => utils.formatByString(month, format));
+        return (0, _dateUtils.getMonthsInYear)(utils, utils.date(undefined, timezone)).map(month => utils.formatByString(month, format));
       }
     case 'weekDay':
       {
@@ -67,9 +75,10 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
 
 // This format should be the same on all the adapters
 // If some adapter does not respect this convention, then we will need to hardcode the format on each adapter.
-export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
+exports.getLetterEditingOptions = getLetterEditingOptions;
+const FORMAT_SECONDS_NO_LEADING_ZEROS = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
 const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-export const getLocalizedDigits = utils => {
+const getLocalizedDigits = utils => {
   const today = utils.date(undefined);
   const formattedZero = utils.formatByString(utils.setSeconds(today, 0), FORMAT_SECONDS_NO_LEADING_ZEROS);
   if (formattedZero === '0') {
@@ -79,7 +88,8 @@ export const getLocalizedDigits = utils => {
     length: 10
   }).map((_, index) => utils.formatByString(utils.setSeconds(today, index), FORMAT_SECONDS_NO_LEADING_ZEROS));
 };
-export const removeLocalizedDigits = (valueStr, localizedDigits) => {
+exports.getLocalizedDigits = getLocalizedDigits;
+const removeLocalizedDigits = (valueStr, localizedDigits) => {
   if (localizedDigits[0] === '0') {
     return valueStr;
   }
@@ -95,13 +105,15 @@ export const removeLocalizedDigits = (valueStr, localizedDigits) => {
   }
   return digits.join('');
 };
-export const applyLocalizedDigits = (valueStr, localizedDigits) => {
+exports.removeLocalizedDigits = removeLocalizedDigits;
+const applyLocalizedDigits = (valueStr, localizedDigits) => {
   if (localizedDigits[0] === '0') {
     return valueStr;
   }
   return valueStr.split('').map(char => localizedDigits[Number(char)]).join('');
 };
-export const isStringNumber = (valueStr, localizedDigits) => {
+exports.applyLocalizedDigits = applyLocalizedDigits;
+const isStringNumber = (valueStr, localizedDigits) => {
   const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
   // `Number(' ')` returns `0` even if ' ' is not a valid number.
   return nonLocalizedValueStr !== ' ' && !Number.isNaN(Number(nonLocalizedValueStr));
@@ -112,7 +124,8 @@ export const isStringNumber = (valueStr, localizedDigits) => {
  * E.g.: `03` => `3`
  * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
  */
-export const cleanLeadingZeros = (valueStr, size) => {
+exports.isStringNumber = isStringNumber;
+const cleanLeadingZeros = (valueStr, size) => {
   let cleanValueStr = valueStr;
 
   // Remove the leading zeros
@@ -124,7 +137,8 @@ export const cleanLeadingZeros = (valueStr, size) => {
   }
   return cleanValueStr;
 };
-export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
+exports.cleanLeadingZeros = cleanLeadingZeros;
+const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
       throw new Error([`MUI X: The token "${section.format}" is a digit format with letter in it.'
@@ -143,7 +157,8 @@ export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localize
   }
   return applyLocalizedDigits(valueStr, localizedDigits);
 };
-export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
+exports.cleanDigitSectionValue = cleanDigitSectionValue;
+const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -205,7 +220,8 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
   }
   return adjustLetterSection();
 };
-export const getSectionVisibleValue = (section, target, localizedDigits) => {
+exports.adjustSectionValue = adjustSectionValue;
+const getSectionVisibleValue = (section, target, localizedDigits) => {
   let value = section.value || section.placeholder;
   const hasLeadingZeros = target === 'non-input' ? section.hasLeadingZerosInFormat : section.hasLeadingZerosInInput;
   if (target === 'non-input' && section.hasLeadingZerosInInput && !section.hasLeadingZerosInFormat) {
@@ -226,7 +242,8 @@ export const getSectionVisibleValue = (section, target, localizedDigits) => {
   }
   return value;
 };
-export const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) => {
+exports.getSectionVisibleValue = getSectionVisibleValue;
+const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) => {
   if (process.env.NODE_ENV !== 'production') {
     if (getDateSectionConfigFromFormatToken(utils, currentFormat).type === 'weekDay') {
       throw new Error("changeSectionValueFormat doesn't support week day formats");
@@ -234,8 +251,9 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
   }
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
+exports.changeSectionValueFormat = changeSectionValueFormat;
 const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(undefined, 'system'), format).length === 4;
-export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
+const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
@@ -286,7 +304,8 @@ export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionTyp
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
-export const getDateFromDateSections = (utils, sections, localizedDigits) => {
+exports.doesSectionFormatHaveLeadingZeros = doesSectionFormatHaveLeadingZeros;
+const getDateFromDateSections = (utils, sections, localizedDigits) => {
   // If we have both a day and a weekDay section,
   // Then we skip the weekDay in the parsing because libraries like dayjs can't parse complicated formats containing a weekDay.
   // dayjs(dayjs().format('dddd MMMM D YYYY'), 'dddd MMMM D YYYY')) // returns `Invalid Date` even if the format is valid.
@@ -305,10 +324,12 @@ export const getDateFromDateSections = (utils, sections, localizedDigits) => {
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
+exports.getDateFromDateSections = getDateFromDateSections;
+const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
   return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
 }).join('');
-export const createDateStrForV6InputFromSections = (sections, localizedDigits, isRtl) => {
+exports.createDateStrForV7HiddenInputFromSections = createDateStrForV7HiddenInputFromSections;
+const createDateStrForV6InputFromSections = (sections, localizedDigits, isRtl) => {
   const formattedSections = sections.map(section => {
     const dateValue = getSectionVisibleValue(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
@@ -325,14 +346,15 @@ export const createDateStrForV6InputFromSections = (sections, localizedDigits, i
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
   return `\u2066${dateStr}\u2069`;
 };
-export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
+exports.createDateStrForV6InputFromSections = createDateStrForV6InputFromSections;
+const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
   const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const endOfDay = utils.endOfDay(today);
   const {
     maxDaysInMonth,
     longestMonth
-  } = getMonthsInYear(utils, today).reduce((acc, month) => {
+  } = (0, _dateUtils.getMonthsInYear)(utils, today).reduce((acc, month) => {
     const daysInMonth = utils.getDaysInMonth(month);
     if (daysInMonth > acc.maxDaysInMonth) {
       return {
@@ -416,8 +438,9 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
     })
   };
 };
+exports.getSectionsBoundaries = getSectionsBoundaries;
 let warnedOnceInvalidSection = false;
-export const validateSections = (sections, valueType) => {
+const validateSections = (sections, valueType) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceInvalidSection) {
       const supportedSections = ['empty'];
@@ -435,6 +458,7 @@ export const validateSections = (sections, valueType) => {
     }
   }
 };
+exports.validateSections = validateSections;
 const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTransferTo) => {
   switch (section.type) {
     case 'year':
@@ -447,8 +471,11 @@ const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTran
       }
     case 'weekDay':
       {
+        let dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
+        if (section.hasLeadingZerosInInput) {
+          dayInWeekStrOfActiveDate = cleanLeadingZeros(dayInWeekStrOfActiveDate, section.maxLength);
+        }
         const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
-        const dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
         const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
         const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
         const diff = dayInWeekOfNewSectionValue - dayInWeekOfActiveDate;
@@ -499,7 +526,7 @@ const reliableSectionModificationOrder = {
   meridiem: 8,
   empty: 9
 };
-export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
+const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it
 [...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
   if (!shouldLimitToEditedSections || section.modified) {
@@ -507,10 +534,12 @@ export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections,
   }
   return mergedDate;
 }, referenceDate);
-export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
+exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
+const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 
 // TODO v9: Remove
-export const getSectionOrder = (sections, shouldApplyRTL) => {
+exports.isAndroid = isAndroid;
+const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};
   if (!shouldApplyRTL) {
     sections.forEach((_, index) => {
@@ -563,7 +592,8 @@ export const getSectionOrder = (sections, shouldApplyRTL) => {
     endIndex: rtl2ltr[sections.length - 1]
   };
 };
-export const parseSelectedSections = (selectedSections, sections) => {
+exports.getSectionOrder = getSectionOrder;
+const parseSelectedSections = (selectedSections, sections) => {
   if (selectedSections == null) {
     return null;
   }
@@ -576,7 +606,8 @@ export const parseSelectedSections = (selectedSections, sections) => {
   }
   return selectedSections;
 };
-export const getSectionValueText = (section, utils) => {
+exports.parseSelectedSections = parseSelectedSections;
+const getSectionValueText = (section, utils) => {
   if (!section.value) {
     return undefined;
   }
@@ -598,7 +629,8 @@ export const getSectionValueText = (section, utils) => {
       return undefined;
   }
 };
-export const getSectionValueNow = (section, utils) => {
+exports.getSectionValueText = getSectionValueText;
+const getSectionValueNow = (section, utils) => {
   if (!section.value) {
     return undefined;
   }
@@ -632,4 +664,5 @@ export const getSectionValueNow = (section, utils) => {
     default:
       return section.contentType !== 'letter' ? Number(section.value) : undefined;
   }
-};
+};
+exports.getSectionValueNow = getSectionValueNow;

package/internals/hooks/useField/useFieldCharacterEditing.d.ts

@@ -1,22 +1,22 @@
-import { PickersTimezone, InferFieldSection } from '../../../models';
-import { FieldSectionsValueBoundaries } from './useField.types';
-import { UpdateSectionValueParams } from './useFieldState';
-import { PickerValidValue } from '../../models';
+import { PickersTimezone, InferFieldSection } from "../../../models/index.js";
+import { FieldSectionsValueBoundaries } from "./useField.types.js";
+import { UpdateSectionValueParams } from "./useFieldState.js";
+import { PickerValidValue } from "../../models/index.js";
 export interface ApplyCharacterEditingParams {
-    keyPressed: string;
-    sectionIndex: number;
+  keyPressed: string;
+  sectionIndex: number;
 }
 interface UseFieldCharacterEditingParams<TValue extends PickerValidValue> {
-    sections: InferFieldSection<TValue>[];
-    updateSectionValue: (params: UpdateSectionValueParams<TValue>) => void;
-    sectionsValueBoundaries: FieldSectionsValueBoundaries;
-    localizedDigits: string[];
-    setTempAndroidValueStr: (newValue: string | null) => void;
-    timezone: PickersTimezone;
+  sections: InferFieldSection<TValue>[];
+  updateSectionValue: (params: UpdateSectionValueParams<TValue>) => void;
+  sectionsValueBoundaries: FieldSectionsValueBoundaries;
+  localizedDigits: string[];
+  setTempAndroidValueStr: (newValue: string | null) => void;
+  timezone: PickersTimezone;
 }
 export interface UseFieldCharacterEditingResponse {
-    applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
-    resetCharacterQuery: () => void;
+  applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
+  resetCharacterQuery: () => void;
 }
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
@@ -25,5 +25,12 @@ export interface UseFieldCharacterEditingResponse {
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export declare const useFieldCharacterEditing: <TValue extends PickerValidValue>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldCharacterEditingParams<TValue>) => UseFieldCharacterEditingResponse;
-export {};
+export declare const useFieldCharacterEditing: <TValue extends PickerValidValue>({
+  sections,
+  updateSectionValue,
+  sectionsValueBoundaries,
+  localizedDigits,
+  setTempAndroidValueStr,
+  timezone
+}: UseFieldCharacterEditingParams<TValue>) => UseFieldCharacterEditingResponse;
+export {};

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -1,9 +1,16 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { useUtils } from "../useUtils.js";
-import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from "./useField.utils.js";
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldCharacterEditing = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useUtils = require("../useUtils");
+var _useField = require("./useField.utils");
 /**
  * The letter editing and the numeric editing each define a `CharacterEditingApplier`.
  * This function decides what the new section value should be and if the focus should switch to the next section.
@@ -36,7 +43,7 @@ const isQueryResponseWithoutValue = response => response.saveQuery != null;
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export const useFieldCharacterEditing = ({
+const useFieldCharacterEditing = ({
   sections,
   updateSectionValue,
   sectionsValueBoundaries,
@@ -44,9 +51,9 @@ export const useFieldCharacterEditing = ({
   setTempAndroidValueStr,
   timezone
 }) => {
-  const utils = useUtils();
+  const utils = (0, _useUtils.useUtils)();
   const [query, setQuery] = React.useState(null);
-  const resetQuery = useEventCallback(() => setQuery(null));
+  const resetQuery = (0, _useEventCallback.default)(() => setQuery(null));
   React.useEffect(() => {
     if (query != null && sections[query.sectionIndex]?.type !== query.sectionType) {
       resetQuery();
@@ -111,7 +118,7 @@ export const useFieldCharacterEditing = ({
       };
     };
     const testQueryOnFormatAndFallbackFormat = (queryValue, activeSection, fallbackFormat, formatFallbackValue) => {
-      const getOptions = format => getLetterEditingOptions(utils, timezone, activeSection.type, format);
+      const getOptions = format => (0, _useField.getLetterEditingOptions)(utils, timezone, activeSection.type, format);
       if (activeSection.contentType === 'letter') {
         return findMatchingOptions(activeSection.format, getOptions(activeSection.format), queryValue);
       }
@@ -119,7 +126,7 @@ export const useFieldCharacterEditing = ({
       // When editing a digit-format month / weekDay and the user presses a letter,
       // We can support the letter editing by using the letter-format month / weekDay and re-formatting the result.
       // We just have to make sure that the default month / weekDay format is a letter format,
-      if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(utils, fallbackFormat).contentType === 'letter') {
+      if (fallbackFormat && formatFallbackValue != null && (0, _useField.getDateSectionConfigFromFormatToken)(utils, fallbackFormat).contentType === 'letter') {
         const fallbackOptions = getOptions(fallbackFormat);
         const response = findMatchingOptions(fallbackFormat, fallbackOptions, queryValue);
         if (isQueryResponseWithoutValue(response)) {
@@ -127,7 +134,7 @@ export const useFieldCharacterEditing = ({
             saveQuery: false
           };
         }
-        return _extends({}, response, {
+        return (0, _extends2.default)({}, response, {
           sectionValue: formatFallbackValue(response.sectionValue, fallbackOptions)
         });
       }
@@ -139,7 +146,7 @@ export const useFieldCharacterEditing = ({
       switch (activeSection.type) {
         case 'month':
           {
-            const formatFallbackValue = fallbackValue => changeSectionValueFormat(utils, fallbackValue, utils.formats.month, activeSection.format);
+            const formatFallbackValue = fallbackValue => (0, _useField.changeSectionValueFormat)(utils, fallbackValue, utils.formats.month, activeSection.format);
             return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.month, formatFallbackValue);
           }
         case 'weekDay':
@@ -163,7 +170,7 @@ export const useFieldCharacterEditing = ({
   };
   const applyNumericEditing = params => {
     const getNewSectionValue = (queryValue, section) => {
-      const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
+      const cleanQueryValue = (0, _useField.removeLocalizedDigits)(queryValue, localizedDigits);
       const queryValueNumber = Number(cleanQueryValue);
       const sectionBoundaries = sectionsValueBoundaries[section.type]({
         currentDate: null,
@@ -185,7 +192,7 @@ export const useFieldCharacterEditing = ({
         };
       }
       const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
-      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
+      const newSectionValue = (0, _useField.cleanDigitSectionValue)(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -199,7 +206,7 @@ export const useFieldCharacterEditing = ({
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
-        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
+        const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, 'digit', 'month', 'MM');
         const response = getNewSectionValue(queryValue, {
           type: activeSection.type,
           format: 'MM',
@@ -211,8 +218,8 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = changeSectionValueFormat(utils, response.sectionValue, 'MM', activeSection.format);
-        return _extends({}, response, {
+        const formattedValue = (0, _useField.changeSectionValueFormat)(utils, response.sectionValue, 'MM', activeSection.format);
+        return (0, _extends2.default)({}, response, {
           sectionValue: formattedValue
         });
       }
@@ -224,8 +231,8 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
-        return _extends({}, response, {
+        const formattedValue = (0, _useField.getDaysInWeekStr)(utils, activeSection.format)[Number(response.sectionValue) - 1];
+        return (0, _extends2.default)({}, response, {
           sectionValue: formattedValue
         });
       }
@@ -233,20 +240,20 @@ export const useFieldCharacterEditing = ({
         saveQuery: false
       };
     };
-    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
+    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => (0, _useField.isStringNumber)(queryValue, localizedDigits));
   };
-  const applyCharacterEditing = useEventCallback(params => {
-    const activeSection = sections[params.sectionIndex];
-    const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
-    const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
-      keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
+  const applyCharacterEditing = (0, _useEventCallback.default)(params => {
+    const section = sections[params.sectionIndex];
+    const isNumericEditing = (0, _useField.isStringNumber)(params.keyPressed, localizedDigits);
+    const response = isNumericEditing ? applyNumericEditing((0, _extends2.default)({}, params, {
+      keyPressed: (0, _useField.applyLocalizedDigits)(params.keyPressed, localizedDigits)
     })) : applyLetterEditing(params);
     if (response == null) {
       setTempAndroidValueStr(null);
       return;
     }
     updateSectionValue({
-      activeSection,
+      section,
       newSectionValue: response.sectionValue,
       shouldGoToNextSection: response.shouldGoToNextSection
     });
@@ -255,4 +262,5 @@ export const useFieldCharacterEditing = ({
     applyCharacterEditing,
     resetCharacterQuery: resetQuery
   };
-};
+};
+exports.useFieldCharacterEditing = useFieldCharacterEditing;

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.ts

@@ -1,15 +1,17 @@
-import * as React from 'react';
-import type { UseFieldInternalProps } from './useField.types';
-import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from '../../models';
-export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
+import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>({ manager, internalProps, }: {
-    manager: TManager;
-    internalProps: PickerManagerFieldInternalProps<TManager>;
-}): PickerManagerFieldInternalPropsWithDefaults<TManager>;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>(parameters: UseFieldInternalPropsWithDefaultsParameters<TManager>): PickerManagerFieldInternalPropsWithDefaults<TManager>;
+interface UseFieldInternalPropsWithDefaultsParameters<TManager extends PickerAnyManager> {
+  manager: TManager;
+  internalProps: PickerManagerFieldInternalProps<TManager>;
+  /**
+   * Hack to make sure that on multi input range field, the `useNullableFieldPrivateContext().fieldRef` is only bound to the field matching the range position.
+   * @default false
+   */
+  skipContextFieldRefAssignment?: boolean;
 }
+export {};

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -1,25 +1,37 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useLocalizationContext } from "../useUtils.js";
-import { useNullablePickerContext } from "../useNullablePickerContext.js";
-export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useUtils = require("../useUtils");
+var _useNullablePickerContext = require("../useNullablePickerContext");
+var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext");
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export function useFieldInternalPropsWithDefaults({
-  manager,
-  internalProps
-}) {
-  const localizationContext = useLocalizationContext();
-  const pickerContext = useNullablePickerContext();
-  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+function useFieldInternalPropsWithDefaults(parameters) {
+  const {
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  } = parameters;
+  const localizationContext = (0, _useUtils.useLocalizationContext)();
+  const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
+  const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
+  const handleFieldRef = (0, _useForkRef.default)(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
-      validationError: ctx.validationError
+      validationError: ctx.validationError,
+      shouldClose: false
     });
   }, [setValue]);
   return React.useMemo(() => {
@@ -27,20 +39,24 @@ export function useFieldInternalPropsWithDefaults({
     // If one of the context is null,
     // Then the field is used as a standalone component and the other context will be null as well.
     if (fieldPrivateContext != null && pickerContext != null) {
-      internalPropsWithDefaultsFromContext = _extends({
+      internalPropsWithDefaultsFromContext = (0, _extends2.default)({
         value: pickerContext.value,
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
         disabled: pickerContext.disabled,
+        readOnly: pickerContext.readOnly,
+        autoFocus: pickerContext.autoFocus && !pickerContext.open,
+        focused: pickerContext.open ? true : undefined,
         format: pickerContext.fieldFormat,
         formatDensity: fieldPrivateContext.formatDensity,
         enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
-        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
+        unstableFieldRef: handleFieldRef
       }, internalProps);
     }
-    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
+    return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
       internalProps: internalPropsWithDefaultsFromContext
     }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
 }