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

package/esm/locales/ptPT.d.ts

@@ -23,6 +23,7 @@ export declare const ptPT: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/ptPT.js

@@ -25,6 +25,7 @@ const ptPTPickers = {
   clearButtonLabel: 'Limpar',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Hoje',
+  nextStepButtonLabel: 'Próximo',
   // Toolbar titles
   datePickerToolbarTitle: 'Selecione a data',
   dateTimePickerToolbarTitle: 'Selecione a data e a hora',

package/esm/locales/roRO.d.ts

@@ -23,6 +23,7 @@ export declare const roRO: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/roRO.js

@@ -26,6 +26,7 @@ const roROPickers = {
   clearButtonLabel: 'Ștergere',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Astăzi',
+  nextStepButtonLabel: 'Următoare',
   // Toolbar titles
   datePickerToolbarTitle: 'Selectați data',
   dateTimePickerToolbarTitle: 'Selectați data și ora',

package/esm/locales/ruRU.d.ts

@@ -23,6 +23,7 @@ export declare const ruRU: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/ruRU.js

@@ -26,6 +26,7 @@ const ruRUPickers = {
   clearButtonLabel: 'Очистить',
   okButtonLabel: 'Ок',
   todayButtonLabel: 'Сегодня',
+  nextStepButtonLabel: 'Следующий',
   // Toolbar titles
   datePickerToolbarTitle: 'Выбрать дату',
   dateTimePickerToolbarTitle: 'Выбрать дату и время',

package/esm/locales/skSK.d.ts

@@ -23,6 +23,7 @@ export declare const skSK: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/skSK.js

@@ -8,8 +8,8 @@ const timeViews = {
 };
 const skSKPickers = {
   // Calendar navigation
-  previousMonth: 'Ďalší mesiac',
-  nextMonth: 'Predchádzajúci mesiac',
+  previousMonth: 'Predchádzajúci mesiac',
+  nextMonth: 'Ďalší mesiac',
   // View navigation
   openPreviousView: 'Otvoriť predchádzajúce zobrazenie',
   openNextView: 'Otvoriť ďalšie zobrazenie',
@@ -27,6 +27,7 @@ const skSKPickers = {
   clearButtonLabel: 'Vymazať',
   okButtonLabel: 'Potvrdiť',
   todayButtonLabel: 'Dnes',
+  nextStepButtonLabel: 'Ďalší',
   // Toolbar titles
   datePickerToolbarTitle: 'Vyberte dátum',
   dateTimePickerToolbarTitle: 'Vyberte dátum a čas',

package/esm/locales/svSE.d.ts

@@ -23,6 +23,7 @@ export declare const svSE: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/svSE.js

@@ -25,6 +25,7 @@ const svSEPickers = {
   clearButtonLabel: 'Rensa',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Idag',
+  nextStepButtonLabel: 'Nästa',
   // Toolbar titles
   datePickerToolbarTitle: 'Välj datum',
   dateTimePickerToolbarTitle: 'Välj datum & tid',

package/esm/locales/trTR.d.ts

@@ -23,6 +23,7 @@ export declare const trTR: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/trTR.js

@@ -26,6 +26,7 @@ const trTRPickers = {
   clearButtonLabel: 'Temizle',
   okButtonLabel: 'Tamam',
   todayButtonLabel: 'Bugün',
+  nextStepButtonLabel: 'Sonraki',
   // Toolbar titles
   datePickerToolbarTitle: 'Tarih Seç',
   dateTimePickerToolbarTitle: 'Tarih & Saat seç',

package/esm/locales/ukUA.d.ts

@@ -23,6 +23,7 @@ export declare const ukUA: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/ukUA.js

@@ -25,6 +25,7 @@ const ukUAPickers = {
   clearButtonLabel: 'Очистити',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Сьогодні',
+  nextStepButtonLabel: 'Наступний',
   // Toolbar titles
   datePickerToolbarTitle: 'Вибрати дату',
   dateTimePickerToolbarTitle: 'Вибрати дату і час',

package/esm/locales/urPK.d.ts

@@ -23,6 +23,7 @@ export declare const urPK: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/urPK.js

@@ -26,6 +26,7 @@ const urPKPickers = {
   clearButtonLabel: 'کلئیر',
   okButtonLabel: 'اوکے',
   todayButtonLabel: 'آج',
+  nextStepButtonLabel: 'مہینہ',
   // Toolbar titles
   datePickerToolbarTitle: 'تاریخ منتخب کریں',
   dateTimePickerToolbarTitle: 'تاریخ اور وقت منتخب کریں',

package/esm/locales/utils/getPickersLocalization.d.ts

@@ -23,6 +23,7 @@ export declare const getPickersLocalization: (pickersTranslations: Partial<Picke
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/utils/pickersLocaleTextApi.d.ts

@@ -47,6 +47,7 @@ export interface PickersComponentAgnosticLocaleText {
   clearButtonLabel: string;
   okButtonLabel: string;
   todayButtonLabel: string;
+  nextStepButtonLabel: string;
   clockLabelText: (view: TimeView, formattedTime: string | null) => string;
   hoursClockNumberText: (hours: string) => string;
   minutesClockNumberText: (minutes: string) => string;

package/esm/locales/viVN.d.ts

@@ -23,6 +23,7 @@ export declare const viVN: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/viVN.js

@@ -25,6 +25,7 @@ const viVNPickers = {
   clearButtonLabel: 'Xóa',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Hôm nay',
+  nextStepButtonLabel: 'Sau',
   // Toolbar titles
   datePickerToolbarTitle: 'Chọn ngày',
   dateTimePickerToolbarTitle: 'Chọn ngày và giờ',

package/esm/locales/zhCN.d.ts

@@ -23,6 +23,7 @@ export declare const zhCN: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/zhCN.js

@@ -25,6 +25,7 @@ const zhCNPickers = {
   clearButtonLabel: '清除',
   okButtonLabel: '确认',
   todayButtonLabel: '今天',
+  nextStepButtonLabel: '下个',
   // Toolbar titles
   datePickerToolbarTitle: '选择日期',
   dateTimePickerToolbarTitle: '选择日期和时间',

package/esm/locales/zhHK.d.ts

@@ -23,6 +23,7 @@ export declare const zhHK: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/zhHK.js

@@ -25,6 +25,7 @@ const zhHKPickers = {
   clearButtonLabel: '清除',
   okButtonLabel: '確認',
   todayButtonLabel: '今日',
+  nextStepButtonLabel: '下個',
   // Toolbar titles
   datePickerToolbarTitle: '選擇日期',
   dateTimePickerToolbarTitle: '選擇日期和時間',

package/esm/locales/zhTW.d.ts

@@ -23,6 +23,7 @@ export declare const zhTW: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/zhTW.js

@@ -25,6 +25,7 @@ const zhTWPickers = {
   clearButtonLabel: '清除',
   okButtonLabel: '確認',
   todayButtonLabel: '今天',
+  nextStepButtonLabel: '下個',
   // Toolbar titles
   datePickerToolbarTitle: '選擇日期',
   dateTimePickerToolbarTitle: '選擇日期和時間',

package/esm/models/fields.d.ts

@@ -69,6 +69,10 @@ export interface FieldSection {
    * For example, on Day.js, the `year` section of the format `[year] YYYY` has a start separator equal to `[year]`
    */
   endSeparator: string;
+  /**
+   * If `true`, the `endSeparator` is a format separator (i.e. ":" or "/").
+   */
+  isEndFormatSeparator?: boolean;
 }
 type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
 export type InferFieldSection<TValue extends PickerValidValue> = IsAny<TValue> extends true ? FieldSection : TValue extends PickerRangeValue ? FieldRangeSection : FieldSection;

package/index.js

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

package/internals/components/PickerFieldUI.d.ts

@@ -100,7 +100,7 @@ export interface PickerFieldUISlotsFromContext extends PickerFieldUISlots {
   openPickerIcon?: React.ElementType;
 }
 export interface PickerFieldUISlotProps {
-  textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<Omit<TextFieldProps, 'onKeyDown'> | PickersTextFieldProps, {}, FieldOwnerState>;
   inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, FieldInputAdornmentOwnerState>;
   clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
   clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
@@ -128,7 +128,7 @@ export declare function useFieldTextFieldProps<TProps extends UseFieldOwnerState
 }>(parameters: UseFieldTextFieldPropsParameters): TProps;
 interface UseFieldTextFieldPropsParameters {
   slotProps: {
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<Omit<TextFieldProps, 'onKeyDown'> | PickersTextFieldProps, {}, FieldOwnerState>;
   } | undefined;
   ref: React.Ref<HTMLDivElement>;
   externalForwardedProps: any;

package/internals/components/PickerPopper/PickerPopper.js

@@ -227,6 +227,7 @@ function PickerPopper(inProps) {
   const {
     dismissViews,
     getCurrentViewMode,
+    onPopperExited,
     triggerElement,
     viewContainerRole
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
@@ -322,6 +323,11 @@ function PickerPopper(inProps) {
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {
+        onExited: event => {
+          onPopperExited?.();
+          slotProps?.desktopTransition?.onExited?.(event);
+          TransitionProps?.onExited?.();
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,

package/internals/components/PickerProvider.d.ts

@@ -6,6 +6,7 @@ import { PickersInputLocaleText } from "../../locales/index.js";
 import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.js";
 import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.js";
 import type { PickersShortcutsItemContext } from '../../PickersShortcuts';
+import type { PickersActionBarAction } from '../../PickersActionBar';
 export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -109,6 +110,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 +208,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> {
   /**
@@ -272,4 +282,12 @@ export interface PickerPrivateContextValue {
    * It is always equal to null if the component you are accessing the context from is not wrapped with a Picker.
    */
   viewContainerRole: 'dialog' | 'tooltip' | null;
+  /**
+   * The actions to render in the action bar if the user doesn't provide any.
+   */
+  defaultActionBarActions: PickersActionBarAction[];
+  /**
+   * The function to call when the Popper is closing animation is finished.
+   */
+  onPopperExited: (() => void) | undefined;
 }

package/internals/components/PickerProvider.js

@@ -30,7 +30,9 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
   hasUIView: true,
   getCurrentViewMode: () => 'UI',
   triggerElement: null,
-  viewContainerRole: null
+  viewContainerRole: null,
+  defaultActionBarActions: [],
+  onPopperExited: undefined
 });
 
 /**

package/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/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -15,8 +15,9 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _PickerFieldUI = require("../../components/PickerFieldUI");
+var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 /**
  * Hook managing all the single-date desktop pickers:
@@ -26,7 +27,8 @@ const _excluded = ["props"],
  */
 const useDesktopPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -36,6 +38,9 @@ const useDesktopPicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = (0, _createNonRangePickerStepNavigation.createNonRangePickerStepNavigation)({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -45,7 +50,8 @@ 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/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/internals/hooks/useField/buildSectionsFromFormat.js

@@ -128,7 +128,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) {
@@ -200,6 +200,7 @@ const buildSections = parameters => {
           startSeparator += char;
         } else {
           sections[sections.length - 1].endSeparator += char;
+          sections[sections.length - 1].isEndFormatSeparator = true;
         }
       }
       i += 1;

package/internals/hooks/useField/useFieldRootProps.js

@@ -38,6 +38,7 @@ function useFieldRootProps(parameters) {
       updateValueFromValueStr
     },
     internalPropsWithDefaults: {
+      disabled = false,
       readOnly = false
     }
   } = parameters;
@@ -50,7 +51,7 @@ function useFieldRootProps(parameters) {
   });
   const containerClickTimeout = (0, _useTimeout.default)();
   const handleClick = (0, _useEventCallback.default)(event => {
-    if (!domGetters.isReady()) {
+    if (disabled || !domGetters.isReady()) {
       return;
     }
     setFocused(true);
@@ -118,7 +119,7 @@ function useFieldRootProps(parameters) {
     updateValueFromValueStr(pastedValue);
   });
   const handleFocus = (0, _useEventCallback.default)(() => {
-    if (focused || !domGetters.isReady()) {
+    if (focused || disabled || !domGetters.isReady()) {
       return;
     }
     const activeElement = (0, _utils.getActiveElement)(document);

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { UseFieldStateReturnValue } from "./useFieldState.js";
+import { UseFieldInternalProps } from "./useField.types.js";
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -10,6 +11,7 @@ import { UseFieldStateReturnValue } from "./useFieldState.js";
 export declare function useFieldSectionContainerProps(parameters: UseFieldSectionContainerPropsParameters): UseFieldSectionContainerPropsReturnValue;
 interface UseFieldSectionContainerPropsParameters {
   stateResponse: UseFieldStateReturnValue<any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
 }
 type UseFieldSectionContainerPropsReturnValue = (sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
 export {};

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -20,12 +20,15 @@ function useFieldSectionContainerProps(parameters) {
     stateResponse: {
       // Methods to update the states
       setSelectedSections
+    },
+    internalPropsWithDefaults: {
+      disabled = false
     }
   } = parameters;
   const createHandleClick = (0, _useEventCallback.default)(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented()) {
+    if (disabled || event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { UseFieldStateReturnValue } from "./useFieldState.js";
 import { FieldSection, PickerManager } from "../../../models/index.js";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
 import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import { PickersSectionElement } from "../../../PickersSectionList/index.js";
 /**
  * Generate the props to pass to the content element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -19,5 +19,5 @@ interface UseFieldSectionContentPropsParameters {
   domGetters: UseFieldDOMGetters;
   focused: boolean;
 }
-type UseFieldSectionContentPropsReturnValue = (section: FieldSection, sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
+type UseFieldSectionContentPropsReturnValue = (section: FieldSection, sectionIndex: number) => PickersSectionElement['content'];
 export {};

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -137,6 +137,9 @@ function useFieldSectionContentProps(parameters) {
     event.dataTransfer.dropEffect = 'none';
   });
   const createFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
+    if (disabled) {
+      return;
+    }
     setSelectedSections(sectionIndex);
   });
   return React.useCallback((section, sectionIndex) => {
@@ -166,10 +169,10 @@ function useFieldSectionContentProps(parameters) {
       contentEditable: !isContainerEditable && !disabled && !readOnly,
       role: 'spinbutton',
       id: `${id}-${section.type}`,
+      'data-range-position': section.dateName || undefined,
       spellCheck: isEditable ? false : undefined,
       autoCapitalize: isEditable ? 'off' : undefined,
       autoCorrect: isEditable ? 'off' : undefined,
-      [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };

package/internals/hooks/useField/useFieldV7TextField.js

@@ -91,7 +91,7 @@ const useFieldV7TextField = parameters => {
   const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
   const [focused, setFocused] = React.useState(false);
   function focusField(newSelectedSections = 0) {
-    if (!sectionListRef.current ||
+    if (disabled || !sectionListRef.current ||
     // if the field is already focused, we don't need to focus it again
     getActiveSectionIndex(sectionListRef) != null) {
       return;
@@ -114,7 +114,8 @@ const useFieldV7TextField = parameters => {
     stateResponse
   });
   const createSectionContainerProps = (0, _useFieldSectionContainerProps.useFieldSectionContainerProps)({
-    stateResponse
+    stateResponse,
+    internalPropsWithDefaults
   });
   const createSectionContentProps = (0, _useFieldSectionContentProps.useFieldSectionContentProps)({
     manager,
@@ -137,6 +138,11 @@ const useFieldV7TextField = parameters => {
     rootProps.onFocus(event);
   });
   const handleRootClick = (0, _useEventCallback.default)(event => {
+    // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.
+    // We avoid this by checking if the call of `handleInputClick` is actually intended, or a propagated call, which should be skipped.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
     onClick?.(event);
     rootProps.onClick(event);
   });
@@ -160,22 +166,26 @@ const useFieldV7TextField = parameters => {
     }
   });
   const elements = React.useMemo(() => {
-    return state.sections.map((section, sectionIndex) => ({
-      container: createSectionContainerProps(sectionIndex),
-      content: createSectionContentProps(section, sectionIndex),
-      before: {
-        children: section.startSeparator
-      },
-      after: {
-        children: section.endSeparator
-      }
-    }));
+    return state.sections.map((section, sectionIndex) => {
+      const content = createSectionContentProps(section, sectionIndex);
+      return {
+        container: createSectionContainerProps(sectionIndex),
+        content: createSectionContentProps(section, sectionIndex),
+        before: {
+          children: section.startSeparator
+        },
+        after: {
+          children: section.endSeparator,
+          'data-range-position': section.isEndFormatSeparator ? content['data-range-position'] : undefined
+        }
+      };
+    });
   }, [state.sections, createSectionContainerProps, createSectionContentProps]);
   React.useEffect(() => {
     if (sectionListRef.current == null) {
-      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
+      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please add the `enableAccessibleFieldDOMStructure={false}` prop to your Picker or Field component:', '', '<DatePicker enableAccessibleFieldDOMStructure={false} slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
     }
-    if (autoFocus && sectionListRef.current) {
+    if (autoFocus && !disabled && sectionListRef.current) {
       sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -204,7 +214,7 @@ const useFieldV7TextField = parameters => {
     getSections: () => state.sections,
     getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
     setSelectedSections: newSelectedSections => {
-      if (!sectionListRef.current) {
+      if (disabled || !sectionListRef.current) {
         return;
       }
       const newParsedSelectedSections = (0, _useField.parseSelectedSections)(newSelectedSections, state.sections);