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

package/esm/PickersActionBar/PickersActionBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DialogActionsProps } from '@mui/material/DialogActions';
-export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today';
+export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today' | 'next' | 'nextOrAccept';
 export interface PickersActionBarProps extends DialogActionsProps {
   /**
    * Ordered array of actions to display.

package/esm/PickersActionBar/PickersActionBar.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { usePickerActionsContext } from "../hooks/index.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersActionBarRoot = styled(DialogActions, {
   name: 'MuiPickersLayout',
@@ -37,8 +37,10 @@ function PickersActionBarComponent(props) {
     clearValue,
     setValueToToday,
     acceptValueChanges,
-    cancelValueChanges
-  } = usePickerActionsContext();
+    cancelValueChanges,
+    goToNextStep,
+    hasNextStep
+  } = usePickerContext();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -64,6 +66,22 @@ function PickersActionBarComponent(props) {
           onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
+      case 'next':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: goToNextStep,
+          children: translations.nextStepButtonLabel
+        }, actionType);
+      case 'nextOrAccept':
+        if (hasNextStep) {
+          return /*#__PURE__*/_jsx(Button, {
+            onClick: goToNextStep,
+            children: translations.nextStepButtonLabel
+          }, actionType);
+        }
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: acceptValueChanges,
+          children: translations.okButtonLabel
+        }, actionType);
       default:
         return null;
     }
@@ -84,7 +102,7 @@ process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
    * - `[]` for Desktop Date Picker and Desktop Date Range Picker
    * - `['cancel', 'accept']` for all other Pickers
    */
-  actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
+  actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'next', 'nextOrAccept', 'today']).isRequired),
   /**
    * If `true`, the actions do not have additional margin.
    * @default false

package/esm/PickersSectionList/PickersSectionList.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PickersSectionListProps } from "./PickersSectionList.types.js";
+import type { PickersSectionListProps } from './PickersSectionList.types';
 export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;

package/esm/PickersSectionList/PickersSectionList.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import { PickersSectionListClasses } from "./pickersSectionListClasses.js";
 import { PickerOwnerState } from "../models/index.js";
+import type { UseFieldDOMGetters } from '../internals/hooks/useField/useField.types';
 export interface PickersSectionListSlots {
   root: React.ElementType;
   section: React.ElementType;
@@ -28,12 +29,7 @@ export interface PickersSectionElement {
   before: React.HTMLAttributes<HTMLSpanElement>;
   after: React.HTMLAttributes<HTMLSpanElement>;
 }
-export interface PickersSectionListRef {
-  getRoot: () => HTMLElement;
-  getSectionContainer: (sectionIndex: number) => HTMLElement;
-  getSectionContent: (sectionIndex: number) => HTMLElement;
-  getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
-}
+export interface PickersSectionListRef extends Omit<UseFieldDOMGetters, 'isReady'> {}
 export interface ExportedPickersSectionListProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
   /**
    * The elements to render.

package/esm/StaticDatePicker/StaticDatePicker.js

@@ -45,7 +45,8 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    validator: validateDate
+    validator: validateDate,
+    steps: null
   });
   return renderPicker();
 });

package/esm/StaticDateTimePicker/StaticDateTimePicker.js

@@ -13,6 +13,13 @@ import { mergeSx } from "../internals/utils/utils.js";
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
 import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { digitalClockClasses } from "../DigitalClock/index.js";
+import { DATE_VIEWS } from "../internals/utils/date-utils.js";
+import { EXPORTED_TIME_VIEWS } from "../internals/utils/time-utils.js";
+const STEPS = [{
+  views: DATE_VIEWS
+}, {
+  views: EXPORTED_TIME_VIEWS
+}];
 /**
  * Demos:
  *
@@ -87,7 +94,8 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    validator: validateDateTime
+    validator: validateDateTime,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/StaticTimePicker/StaticTimePicker.js

@@ -47,7 +47,8 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    validator: validateTime
+    validator: validateTime,
+    steps: null
   });
   return renderPicker();
 });

package/esm/TimeField/TimeField.js

@@ -123,7 +123,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
-   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -150,12 +150,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   /**
    * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
-   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
    * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
    * component depending on the `variant` prop value.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**

package/esm/TimePicker/shared.js

@@ -4,12 +4,14 @@ import { useThemeProps } from '@mui/material/styles';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { TimePickerToolbar } from "./TimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
+import { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
 export function useTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
@@ -19,7 +21,7 @@ export function useTimePickerDefaultizedProps(props, name) {
       timePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     ampm,
     localeText
   }, applyDefaultViewProps({
@@ -28,8 +30,6 @@ export function useTimePickerDefaultizedProps(props, name) {
     defaultViews: ['hours', 'minutes'],
     defaultOpenTo: 'hours'
   }), {
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
     slots: _extends({
       toolbar: TimePickerToolbar
     }, themeProps.slots),

package/esm/YearCalendar/YearCalendar.js

@@ -11,14 +11,14 @@ import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { YearCalendarButton } from "./YearCalendarButton.js";
-import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
-import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -27,20 +27,14 @@ const useUtilityClasses = classes => {
   return composeClasses(slots, getYearCalendarUtilityClass, classes);
 };
 function useYearCalendarDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
-  return _extends({
-    disablePast: false,
-    disableFuture: false
-  }, themeProps, {
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
     yearsPerRow: themeProps.yearsPerRow ?? 3,
-    yearsOrder: themeProps.yearsOrder ?? 'asc',
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
+    yearsOrder: themeProps.yearsOrder ?? 'asc'
   });
 }
 const YearCalendarRoot = styled('div', {

package/esm/index.js

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

package/esm/internals/components/PickerProvider.d.ts

@@ -109,6 +109,10 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * If it is "enabled", the field should render an interactive UI to open the Picker.
    */
   triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * Whether the Picker has any value picking steps left.
+   */
+  hasNextStep: boolean;
   /**
    * The ref to attach to the popup's outermost element that contains the view, if any.
    * When using a built-in popup component, this property is automatically attached to the appropriate element.
@@ -203,6 +207,11 @@ export interface PickerActionsContextValue<TValue extends PickerValidValue, TVie
    * The value will be reset to the last accepted value.
    */
   cancelValueChanges: () => void;
+  /**
+   * Go to the next step in the value picking process.
+   * For example, on the Mobile Date Time Picker, if the user is editing the date, it will switch to editing the time.
+   */
+  goToNextStep: () => void;
 }
 export interface SetValueActionOptions<TError = string | null> {
   /**

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  */
 export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -9,6 +9,7 @@ import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -19,7 +20,8 @@ import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js"
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useDesktopPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -29,6 +31,9 @@ export const useDesktopPicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -38,7 +43,8 @@ export const useDesktopPicker = _ref => {
     localeText,
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    variant: 'desktop'
+    variant: 'desktop',
+    getStepNavigation
   }));
   const labelId = providerProps.privateContextValue.labelId;
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -7,6 +7,7 @@ import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -38,4 +39,10 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
   props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
 }

package/esm/internals/hooks/useField/buildSectionsFromFormat.js

@@ -121,7 +121,7 @@ const createSection = ({
       maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
     } else {
       if (sectionConfig.maxLength == null) {
-        throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
+        throw new Error(`MUI X: The token ${token} should have a 'maxLength' property on it's adapter`);
       }
       maxLength = sectionConfig.maxLength;
       if (isValidDate) {

package/esm/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/esm/internals/hooks/useField/syncSelectionToDOM.js

@@ -0,0 +1,50 @@
+import { getActiveElement } from "../../utils/utils.js";
+export 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(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/esm/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/esm/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/esm/internals/hooks/useField/useField.utils.js

@@ -493,61 +493,4 @@ export const parseSelectedSections = (selectedSections, sections) => {
     return index === -1 ? null : index;
   }
   return selectedSections;
-};
-export 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;
-  }
-};
-export 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;
-  }
 };

package/esm/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/esm/internals/hooks/useField/useFieldHiddenInputProps.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import useEventCallback from '@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.
+ */
+export function useFieldHiddenInputProps(parameters) {
+  const {
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
+    stateResponse: {
+      // States and derived states
+      areAllSectionsEmpty,
+      state,
+      // Methods to update the states
+      updateValueFromValueStr
+    }
+  } = parameters;
+  const handleChange = useEventCallback(event => {
+    updateValueFromValueStr(event.target.value);
+  });
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  return {
+    value: valueStr,
+    onChange: handleChange
+  };
+}

package/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useLocalizationContext } from "../useUtils.js";
 import { useNullablePickerContext } from "../useNullablePickerContext.js";
 import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
 
@@ -12,11 +11,12 @@ import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContex
  */
 export function useFieldInternalPropsWithDefaults(parameters) {
   const {
-    manager,
+    manager: {
+      internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToFieldInternalProps
+    },
     internalProps,
     skipContextFieldRefAssignment
   } = parameters;
-  const localizationContext = useLocalizationContext();
   const pickerContext = useNullablePickerContext();
   const fieldPrivateContext = useNullableFieldPrivateContext();
   const handleFieldRef = useForkRef(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
@@ -27,12 +27,11 @@ export 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 = _extends({
+      return _extends({
         value: pickerContext.value,
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
@@ -48,8 +47,7 @@ export function useFieldInternalPropsWithDefaults(parameters) {
         unstableFieldRef: handleFieldRef
       }, internalProps);
     }
-    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
-      internalProps: internalPropsWithDefaultsFromContext
-    }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+    return internalProps;
+  }, [pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+  return useApplyDefaultValuesToFieldInternalProps(internalPropsWithDefaultsFromContext);
 }

package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js

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