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

package/esm/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -142,6 +142,34 @@ const PickersInputBaseInput = styled('input', {
   slot: 'Input',
   overridesResolver: (props, styles) => styles.hiddenInput
 })(_extends({}, visuallyHidden));
+const PickersInputBaseActiveBar = styled('div', {
+  name: 'MuiPickersInputBase',
+  slot: 'ActiveBar',
+  overridesResolver: (props, styles) => styles.activeBar
+})(({
+  theme,
+  ownerState
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  height: 2,
+  bottom: 2,
+  borderTopLeftRadius: 2,
+  borderTopRightRadius: 2,
+  transition: theme.transitions.create(['width', 'left'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: (theme.vars || theme).palette.primary.main,
+  '[data-active-range-position="start"] &, [data-active-range-position="end"] &': {
+    display: 'block'
+  },
+  '[data-active-range-position="start"] &': {
+    left: ownerState.sectionOffsets[0]
+  },
+  '[data-active-range-position="end"] &': {
+    left: ownerState.sectionOffsets[1]
+  }
+}));
 const useUtilityClasses = (classes, ownerState) => {
   const {
     isFieldFocused,
@@ -161,10 +189,39 @@ const useUtilityClasses = (classes, ownerState) => {
     sectionsContainer: ['sectionsContainer'],
     sectionContent: ['sectionContent'],
     sectionBefore: ['sectionBefore'],
-    sectionAfter: ['sectionAfter']
+    sectionAfter: ['sectionAfter'],
+    activeBar: ['activeBar']
   };
   return composeClasses(slots, getPickersInputBaseUtilityClass, classes);
 };
+function resolveSectionElementWidth(sectionElement, rootRef, index, dateRangePosition) {
+  if (sectionElement.content.id) {
+    const activeSectionElements = rootRef.current?.querySelectorAll(`[data-sectionindex="${index}"] [data-range-position="${dateRangePosition}"]`);
+    if (activeSectionElements) {
+      return Array.from(activeSectionElements).reduce((currentActiveBarWidth, element) => {
+        return currentActiveBarWidth + element.offsetWidth;
+      }, 0);
+    }
+  }
+  return 0;
+}
+function resolveSectionWidthAndOffsets(elements, rootRef) {
+  let activeBarWidth = 0;
+  const activeRangePosition = rootRef.current?.getAttribute('data-active-range-position');
+  if (activeRangePosition === 'end') {
+    for (let i = elements.length - 1; i >= elements.length / 2; i -= 1) {
+      activeBarWidth += resolveSectionElementWidth(elements[i], rootRef, i, 'end');
+    }
+  } else {
+    for (let i = 0; i < elements.length / 2; i += 1) {
+      activeBarWidth += resolveSectionElementWidth(elements[i], rootRef, i, 'start');
+    }
+  }
+  return {
+    activeBarWidth,
+    sectionOffsets: [rootRef.current?.querySelector(`[data-sectionindex="0"]`)?.offsetLeft || 0, rootRef.current?.querySelector(`[data-sectionindex="${elements.length / 2}"]`)?.offsetLeft || 0]
+  };
+}
 
 /**
  * @ignore - internal component.
@@ -203,6 +260,8 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerStateContext = usePickerTextFieldOwnerState();
   const rootRef = React.useRef(null);
+  const activeBarRef = React.useRef(null);
+  const sectionOffsetsRef = React.useRef([]);
   const handleRootRef = useForkRef(ref, rootRef);
   const handleInputRef = useForkRef(inputProps?.ref, inputRef);
   const muiFormControl = useFormControl();
@@ -217,6 +276,24 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
   const handleHiddenInputFocus = event => {
     handleInputFocus(event);
   };
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    if (event.key === 'Enter' && !event.defaultMuiPrevented) {
+      // Do nothing if it's a multi input field
+      if (rootRef.current?.dataset.multiInput) {
+        return;
+      }
+      const closestForm = rootRef.current?.closest('form');
+      const submitTrigger = closestForm?.querySelector('[type="submit"]');
+      if (!closestForm || !submitTrigger) {
+        // do nothing if there is no form or no submit button (trigger)
+        return;
+      }
+      event.preventDefault();
+      // native input trigger submit with the `submitter` field set
+      closestForm.requestSubmit(submitTrigger);
+    }
+  };
   const handleInputBlur = event => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -250,6 +327,20 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     ownerState
   });
   const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
+  const isSingleInputRange = elements.some(element => element.content['data-range-position'] !== undefined);
+  React.useEffect(() => {
+    if (!isSingleInputRange || !ownerState.isPickerOpen) {
+      return;
+    }
+    const {
+      activeBarWidth,
+      sectionOffsets
+    } = resolveSectionWidthAndOffsets(elements, rootRef);
+    sectionOffsetsRef.current = [sectionOffsets[0], sectionOffsets[1]];
+    if (activeBarRef.current) {
+      activeBarRef.current.style.width = `${activeBarWidth}px`;
+    }
+  }, [elements, isSingleInputRange, ownerState.isPickerOpen]);
   return /*#__PURE__*/_jsxs(InputRoot, _extends({}, inputRootProps, {
     children: [startAdornment, /*#__PURE__*/_jsx(PickersSectionList, {
       sectionListRef: sectionListRef,
@@ -261,7 +352,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
-      onKeyDown: onKeyDown,
+      onKeyDown: handleKeyDown,
       slots: {
         root: InputSectionsContainer,
         section: PickersInputBaseSection,
@@ -298,7 +389,13 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       onFocus: handleHiddenInputFocus
     }, inputProps, {
       ref: handleInputRef
-    }))]
+    })), isSingleInputRange && /*#__PURE__*/_jsx(PickersInputBaseActiveBar, {
+      className: classes.activeBar,
+      ref: activeBarRef,
+      ownerState: {
+        sectionOffsets: sectionOffsetsRef.current
+      }
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
@@ -319,6 +416,7 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: PropTypes.bool.isRequired,
+  'data-multi-input': PropTypes.string,
   /**
    * The elements to render.
    * Each element contains the prop to edit a section of the value.

package/esm/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BoxProps } from '@mui/material/Box';
+import { MuiEvent } from '@mui/x-internals/types';
 import { PickersSectionListProps } from "../../PickersSectionList/index.js";
 export interface PickersInputPropsUsedByField extends Pick<PickersSectionListProps, 'elements' | 'sectionListRef' | 'contentEditable' | 'tabIndex'> {
   /**
@@ -9,7 +10,7 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
    */
   areAllSectionsEmpty: boolean;
   onClick: React.MouseEventHandler<HTMLDivElement>;
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   endAdornment?: React.ReactNode;
@@ -56,4 +57,5 @@ export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInput
     root?: any;
     input?: any;
   };
+  'data-multi-input'?: string;
 }

package/esm/PickersTextField/PickersInputBase/pickersInputBaseClasses.d.ts

@@ -17,14 +17,16 @@ export interface PickersInputBaseClasses {
   sectionsContainer: string;
   /** Styles applied to the content of a section. */
   sectionContent: string;
-  /** Styles applied to the separator before a section */
+  /** Styles applied to the separator before a section. */
   sectionBefore: string;
-  /** Styles applied to the separator after a section */
+  /** Styles applied to the separator after a section. */
   sectionAfter: string;
-  /** Styles applied to the root if there is a startAdornment present */
+  /** Styles applied to the root if there is a startAdornment present. */
   adornedStart: string;
-  /** Styles applied to the root if there is an endAdornment present */
+  /** Styles applied to the root if there is an endAdornment present. */
   adornedEnd: string;
+  /** Styles applied to the active section bar. */
+  activeBar: string;
 }
 export type PickersInputBaseClassKey = keyof PickersInputBaseClasses;
 export declare function getPickersInputBaseUtilityClass(slot: string): string;

package/esm/PickersTextField/PickersInputBase/pickersInputBaseClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersInputBaseUtilityClass(slot) {
   return generateUtilityClass('MuiPickersInputBase', slot);
 }
-export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input']);
+export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'activeBar']);

package/esm/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -140,6 +140,7 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: PropTypes.bool.isRequired,
+  'data-multi-input': PropTypes.string,
   /**
    * The elements to render.
    * Each element contains the prop to edit a section of the value.

package/esm/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts

@@ -19,4 +19,5 @@ export declare const pickersOutlinedInputClasses: {
   sectionContent: string;
   sectionBefore: string;
   sectionAfter: string;
+  activeBar: string;
 };

package/esm/PickersTextField/PickersTextField.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -85,7 +85,9 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       FormHelperTextProps,
       // Props used by InputLabel
       label,
-      InputLabelProps
+      InputLabelProps,
+      // @ts-ignore
+      'data-active-range-position': dataActiveRangePosition
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
@@ -156,7 +158,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         role: "group",
         "aria-labelledby": inputLabelId,
         "aria-describedby": helperTextId,
-        "aria-live": helperTextId ? 'polite' : undefined
+        "aria-live": helperTextId ? 'polite' : undefined,
+        "data-active-range-position": dataActiveRangePosition
       }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
         id: helperTextId
       }, FormHelperTextProps, {

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/TimePicker.js

@@ -102,7 +102,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/esm/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/esm/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/esm/internals/components/PickerPopper/PickerPopper.js

@@ -219,6 +219,7 @@ export function PickerPopper(inProps) {
   const {
     dismissViews,
     getCurrentViewMode,
+    onPopperExited,
     triggerElement,
     viewContainerRole
   } = usePickerPrivateContext();
@@ -314,6 +315,11 @@ export function PickerPopper(inProps) {
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
+        onExited: event => {
+          onPopperExited?.();
+          slotProps?.desktopTransition?.onExited?.(event);
+          TransitionProps?.onExited?.();
+        },
         children: /*#__PURE__*/_jsx(PickerPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,

package/esm/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/esm/internals/components/PickerProvider.js

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

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

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

@@ -32,6 +32,7 @@ export function useFieldRootProps(parameters) {
       updateValueFromValueStr
     },
     internalPropsWithDefaults: {
+      disabled = false,
       readOnly = false
     }
   } = parameters;
@@ -44,7 +45,7 @@ export function useFieldRootProps(parameters) {
   });
   const containerClickTimeout = useTimeout();
   const handleClick = useEventCallback(event => {
-    if (!domGetters.isReady()) {
+    if (disabled || !domGetters.isReady()) {
       return;
     }
     setFocused(true);
@@ -112,7 +113,7 @@ export function useFieldRootProps(parameters) {
     updateValueFromValueStr(pastedValue);
   });
   const handleFocus = useEventCallback(() => {
-    if (focused || !domGetters.isReady()) {
+    if (focused || disabled || !domGetters.isReady()) {
       return;
     }
     const activeElement = getActiveElement(document);

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

@@ -12,12 +12,15 @@ export function useFieldSectionContainerProps(parameters) {
     stateResponse: {
       // Methods to update the states
       setSelectedSections
+    },
+    internalPropsWithDefaults: {
+      disabled = false
     }
   } = parameters;
   const createHandleClick = useEventCallback(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/esm/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/esm/internals/hooks/useField/useFieldSectionContentProps.js

@@ -129,6 +129,9 @@ export function useFieldSectionContentProps(parameters) {
     event.dataTransfer.dropEffect = 'none';
   });
   const createFocusHandler = useEventCallback(sectionIndex => () => {
+    if (disabled) {
+      return;
+    }
     setSelectedSections(sectionIndex);
   });
   return React.useCallback((section, sectionIndex) => {
@@ -158,10 +161,10 @@ export 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'
     };