@mui/x-date-pickers 8.0.0-beta.1 → 8.0.0-beta.2

package/esm/managers/useDateTimeManager.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateTime } from "../validation/index.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 export function useDateTimeManager(parameters = {}) {
   const {
@@ -17,15 +17,7 @@ export function useDateTimeManager(parameters = {}) {
     internal_valueManager: singleItemValueManager,
     internal_fieldValueManager: singleItemFieldValueManager,
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
-      internalProps,
-      utils,
-      defaultDates
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure]);
 }
@@ -37,27 +29,25 @@ function useOpenPickerButtonAriaLabel(value) {
     return translations.openDatePickerDialogue(formattedValue);
   }, [value, translations, utils]);
 }
-
-/**
- * Private utility function to get the default internal props for the field with date time editing.
- * Is used by the `useDateTimeManager` and `useDateTimeRangeManager` hooks.
- */
-export function getDateTimeFieldInternalPropsDefaults(parameters) {
-  const {
-    defaultDates,
-    utils,
-    internalProps
-  } = parameters;
-  const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
-  return {
-    disablePast: internalProps.disablePast ?? false,
-    disableFuture: internalProps.disableFuture ?? false,
-    format: internalProps.format ?? defaultFormat,
-    disableIgnoringDatePartForTimeValidation: Boolean(internalProps.minDateTime || internalProps.maxDateTime),
-    minDate: applyDefaultDate(utils, internalProps.minDateTime ?? internalProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, internalProps.maxDateTime ?? internalProps.maxDate, defaultDates.maxDate),
-    minTime: internalProps.minDateTime ?? internalProps.minTime,
-    maxTime: internalProps.maxDateTime ?? internalProps.maxTime
-  };
+function useApplyDefaultValuesToDateTimeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
+}
+export function useApplyDefaultValuesToDateTimeValidationProps(props) {
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    // TODO: Explore if we can remove it from the public API
+    disableIgnoringDatePartForTimeValidation: !!props.minDateTime || !!props.maxDateTime || !!props.disableFuture || !!props.disablePast,
+    minDate: applyDefaultDate(utils, props.minDateTime ?? props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
+    minTime: props.minDateTime ?? props.minTime,
+    maxTime: props.maxDateTime ?? props.maxTime
+  }), [props.minDateTime, props.maxDateTime, props.minTime, props.maxTime, props.minDate, props.maxDate, props.disableFuture, props.disablePast, utils, defaultDates]);
 }

package/esm/managers/useTimeManager.d.ts

@@ -1,24 +1,15 @@
 import type { MakeOptional } from '@mui/x-internals/types';
 import { PickerManager, TimeValidationError } from "../models/index.js";
 import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
-import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
 import { AmPmProps } from "../internals/models/props/time.js";
-import { ExportedValidateTimeProps, ValidateTimeProps, ValidateTimePropsToDefault } from "../validation/validateTime.js";
-import { PickerManagerFieldInternalPropsWithDefaults, PickerValue } from "../internals/models/index.js";
+import { ExportedValidateTimeProps, ValidateTimeProps } from "../validation/validateTime.js";
+import { PickerValue } from "../internals/models/index.js";
 export declare function useTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
-/**
- * Private utility function to get the default internal props for the fields with time editing.
- * Is used by the `useTimeManager` and `useTimeRangeManager` hooks.
- */
-export declare function getTimeFieldInternalPropsDefaults(parameters: GetTimeFieldInternalPropsDefaultsParameters): GetTimeFieldInternalPropsDefaultsReturnValue;
+type SharedTimeAndTimeRangeValidationProps = 'disablePast' | 'disableFuture';
+export declare function useApplyDefaultValuesToTimeValidationProps(props: Pick<ExportedValidateTimeProps, SharedTimeAndTimeRangeValidationProps>): Pick<ValidateTimeProps, SharedTimeAndTimeRangeValidationProps>;
 export interface UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends AmPmProps {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
 export type UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError, ValidateTimeProps, TimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
 export interface TimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, AmPmProps {}
-type TimeManagerFieldPropsToDefault = 'format' | ValidateTimePropsToDefault;
-interface GetTimeFieldInternalPropsDefaultsParameters extends Pick<MuiPickersAdapterContextValue, 'utils'> {
-  internalProps: Pick<TimeManagerFieldInternalProps<true>, TimeManagerFieldPropsToDefault | 'ampm'>;
-}
-interface GetTimeFieldInternalPropsDefaultsReturnValue extends Pick<PickerManagerFieldInternalPropsWithDefaults<UseTimeManagerReturnValue<true>>, TimeManagerFieldPropsToDefault> {}
 export {};

package/esm/managers/useTimeManager.js

@@ -17,13 +17,7 @@ export function useTimeManager(parameters = {}) {
     internal_valueManager: singleItemValueManager,
     internal_fieldValueManager: singleItemFieldValueManager,
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils
-    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
   }), [ampm, enableAccessibleFieldDOMStructure]);
 }
@@ -38,21 +32,17 @@ function createUseOpenPickerButtonAriaLabel(ampm) {
     }, [value, translations, utils]);
   };
 }
-
-/**
- * Private utility function to get the default internal props for the fields with time editing.
- * Is used by the `useTimeManager` and `useTimeRangeManager` hooks.
- */
-export function getTimeFieldInternalPropsDefaults(parameters) {
-  const {
-    utils,
-    internalProps
-  } = parameters;
-  const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
-  return {
-    disablePast: internalProps.disablePast ?? false,
-    disableFuture: internalProps.disableFuture ?? false,
-    format: internalProps.format ?? defaultFormat
-  };
+function useApplyDefaultValuesToTimeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
+}
+export function useApplyDefaultValuesToTimeValidationProps(props) {
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false
+  }), [props.disablePast, props.disableFuture]);
 }

package/esm/models/manager.d.ts

@@ -1,5 +1,4 @@
 import type { FieldValueManager, UseFieldInternalProps } from '../internals/hooks/useField';
-import type { UseLocalizationContextReturnValue } from '../internals/hooks/useUtils';
 import type { PickerValidValue, PickerValueManager } from '../internals/models';
 import type { Validator } from '../validation';
 import type { PickerValueType } from './common';
@@ -66,18 +65,14 @@ export interface PickerManager<TValue extends PickerValidValue, TEnableAccessibl
    * - a default format to display the value in the field
    * - some default validation props that are needed to validate the value (e.g: minDate, maxDate)
    * This property is not part of the public API and should not be used directly.
-   * @param {ApplyDefaultsToFieldInternalPropsParameters<TFieldInternalProps>} parameters The parameters to apply the defaults.
+   * @param {TFieldInternalProps<TFieldInternalProps>} internalProps The field internal props to apply the defaults to.
    * @returns {TFieldInternalPropsWithDefaults} The field internal props with the defaults applied.
    */
-  internal_applyDefaultsToFieldInternalProps: (parameters: ApplyDefaultsToFieldInternalPropsParameters<TFieldInternalProps>) => UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
+  internal_useApplyDefaultValuesToFieldInternalProps: (internalProps: TFieldInternalProps) => UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
   /**
    * Returns a hook that creates the aria-label to apply on the button that opens the Picker.
    * @param {TValue} value The value of the Picker.
    * @returns {string} The aria-label to apply on the button that opens the Picker.
    */
   internal_useOpenPickerButtonAriaLabel: (value: TValue) => string;
-}
-interface ApplyDefaultsToFieldInternalPropsParameters<TFieldInternalProps extends {}> extends UseLocalizationContextReturnValue {
-  internalProps: TFieldInternalProps;
-}
-export {};
+}

package/esm/validation/validateDate.js

@@ -1,4 +1,3 @@
-import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 
 /**
@@ -27,11 +26,11 @@ export const validateDate = ({
     shouldDisableMonth,
     shouldDisableYear,
     disablePast,
-    disableFuture
+    disableFuture,
+    minDate,
+    maxDate
   } = props;
   const now = adapter.utils.date(undefined, timezone);
-  const minDate = applyDefaultDate(adapter.utils, props.minDate, adapter.defaultDates.minDate);
-  const maxDate = applyDefaultDate(adapter.utils, props.maxDate, adapter.defaultDates.maxDate);
   switch (true) {
     case !adapter.utils.isValid(value):
       return 'invalidDate';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-beta.1
+ * @mui/x-date-pickers v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -0,0 +1,9 @@
+import { PickerValidValue } from "../../models/index.js";
+import { UseFieldDOMGetters } from "./useField.types.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+export declare function syncSelectionToDOM<TValue extends PickerValidValue>(parameters: SyncSelectionToDOMParameters<TValue>): void;
+export interface SyncSelectionToDOMParameters<TValue extends PickerValidValue> {
+  domGetters: UseFieldDOMGetters;
+  stateResponse: UseFieldStateReturnValue<TValue>;
+  focused: boolean;
+}

package/internals/hooks/useField/syncSelectionToDOM.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.syncSelectionToDOM = syncSelectionToDOM;
+var _utils = require("../../utils/utils");
+function syncSelectionToDOM(parameters) {
+  const {
+    focused,
+    domGetters,
+    stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
+      state
+    }
+  } = parameters;
+  if (!domGetters.isReady()) {
+    return;
+  }
+  const selection = document.getSelection();
+  if (!selection) {
+    return;
+  }
+  if (parsedSelectedSections == null) {
+    // If the selection contains an element inside the field, we reset it.
+    if (selection.rangeCount > 0 && domGetters.getRoot().contains(selection.getRangeAt(0).startContainer)) {
+      selection.removeAllRanges();
+    }
+    if (focused) {
+      domGetters.getRoot().blur();
+    }
+    return;
+  }
+
+  // On multi input range pickers we want to update selection range only for the active input
+  if (!domGetters.getRoot().contains((0, _utils.getActiveElement)(document))) {
+    return;
+  }
+  const range = new window.Range();
+  let target;
+  if (parsedSelectedSections === 'all') {
+    target = domGetters.getRoot();
+  } else {
+    const section = state.sections[parsedSelectedSections];
+    if (section.type === 'empty') {
+      target = domGetters.getSectionContainer(parsedSelectedSections);
+    } else {
+      target = domGetters.getSectionContent(parsedSelectedSections);
+    }
+  }
+  range.selectNodeContents(target);
+  target.focus();
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
 import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
-import { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
+import type { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
 import { FormProps, InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
 export interface UseFieldParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
   manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
@@ -319,4 +319,11 @@ export interface CharacterEditingQuery {
 export type UseFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure> & {
   enableAccessibleFieldDOMStructure?: boolean;
 };
+export interface UseFieldDOMGetters {
+  isReady: () => boolean;
+  getRoot: () => HTMLElement;
+  getSectionContainer: (sectionIndex: number) => HTMLElement;
+  getSectionContent: (sectionIndex: number) => HTMLElement;
+  getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
+}
 export {};

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

@@ -33,6 +33,4 @@ export declare const validateSections: <TValue extends PickerValidValue>(section
 export declare const mergeDateIntoReferenceDate: (utils: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
 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 parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;

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

@@ -3,7 +3,7 @@
 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.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
+exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = 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.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _dateUtils = require("../../utils/date-utils");
 const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
@@ -520,63 +520,4 @@ const parseSelectedSections = (selectedSections, sections) => {
   }
   return selectedSections;
 };
-exports.parseSelectedSections = parseSelectedSections;
-const getSectionValueText = (section, utils) => {
-  if (!section.value) {
-    return undefined;
-  }
-  switch (section.type) {
-    case 'month':
-      {
-        if (section.contentType === 'digit') {
-          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
-        }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
-      }
-    case 'day':
-      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
-    case 'weekDay':
-      // TODO: improve by providing the label of the week day
-      return undefined;
-    default:
-      return undefined;
-  }
-};
-exports.getSectionValueText = getSectionValueText;
-const getSectionValueNow = (section, utils) => {
-  if (!section.value) {
-    return undefined;
-  }
-  switch (section.type) {
-    case 'weekDay':
-      {
-        if (section.contentType === 'letter') {
-          // TODO: improve by resolving the week day number from a letter week day
-          return undefined;
-        }
-        return Number(section.value);
-      }
-    case 'meridiem':
-      {
-        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
-        if (parsedDate) {
-          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
-        }
-        return undefined;
-      }
-    case 'day':
-      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
-    case 'month':
-      {
-        if (section.contentType === 'digit') {
-          return Number(section.value);
-        }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
-      }
-    default:
-      return section.contentType !== 'letter' ? Number(section.value) : undefined;
-  }
-};
-exports.getSectionValueNow = getSectionValueNow;
+exports.parseSelectedSections = parseSelectedSections;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PickerManager } from "../../../models/index.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+/**
+ * Generate the props to pass to the hidden input element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
+ */
+export declare function useFieldHiddenInputProps(parameters: UseFieldHiddenInputPropsParameters): UseFieldHiddenInputPropsReturnValue;
+interface UseFieldHiddenInputPropsParameters {
+  manager: PickerManager<any, any, any, any, any>;
+  stateResponse: UseFieldStateReturnValue<any>;
+}
+interface UseFieldHiddenInputPropsReturnValue {
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}
+export {};

package/internals/hooks/useField/useFieldHiddenInputProps.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldHiddenInputProps = useFieldHiddenInputProps;
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+/**
+ * Generate the props to pass to the hidden input element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
+ */
+function useFieldHiddenInputProps(parameters) {
+  const {
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
+    stateResponse: {
+      // States and derived states
+      areAllSectionsEmpty,
+      state,
+      // Methods to update the states
+      updateValueFromValueStr
+    }
+  } = parameters;
+  const handleChange = (0, _useEventCallback.default)(event => {
+    updateValueFromValueStr(event.target.value);
+  });
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  return {
+    value: valueStr,
+    onChange: handleChange
+  };
+}

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -9,7 +9,6 @@ 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");
 /**
@@ -19,11 +18,12 @@ var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext
  */
 function useFieldInternalPropsWithDefaults(parameters) {
   const {
-    manager,
+    manager: {
+      internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToFieldInternalProps
+    },
     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);
@@ -34,12 +34,11 @@ function useFieldInternalPropsWithDefaults(parameters) {
       shouldClose: false
     });
   }, [setValue]);
-  return React.useMemo(() => {
-    let internalPropsWithDefaultsFromContext = internalProps;
+  const internalPropsWithDefaultsFromContext = React.useMemo(() => {
     // 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 = (0, _extends2.default)({
+      return (0, _extends2.default)({
         value: pickerContext.value,
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
@@ -55,8 +54,7 @@ function useFieldInternalPropsWithDefaults(parameters) {
         unstableFieldRef: handleFieldRef
       }, internalProps);
     }
-    return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
-      internalProps: internalPropsWithDefaultsFromContext
-    }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+    return internalProps;
+  }, [pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+  return useApplyDefaultValuesToFieldInternalProps(internalPropsWithDefaultsFromContext);
 }

package/internals/hooks/useField/useFieldRootHandleKeyDown.js

@@ -43,6 +43,7 @@ function useFieldRootHandleKeyDown(parameters) {
     if (disabled) {
       return;
     }
+
     // eslint-disable-next-line default-case
     switch (true) {
       // Select all

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

@@ -0,0 +1,32 @@
+import { PickerManager } from "../../../models/index.js";
+import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+/**
+ * Generate the props to pass to the root element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
+ */
+export declare function useFieldRootProps(parameters: UseFieldRootPropsParameters): UseFieldRootPropsReturnValue;
+interface UseFieldRootPropsParameters {
+  manager: PickerManager<any, any, any, any, any>;
+  stateResponse: UseFieldStateReturnValue<any>;
+  applyCharacterEditing: UseFieldCharacterEditingReturnValue;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  domGetters: UseFieldDOMGetters;
+  focused: boolean;
+  setFocused: (focused: boolean) => void;
+}
+interface UseFieldRootPropsReturnValue {
+  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+  onBlur: React.FocusEventHandler<HTMLDivElement>;
+  onFocus: React.FocusEventHandler<HTMLDivElement>;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  contentEditable: boolean;
+  tabIndex: number;
+}
+export {};