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

package/DateField/DateField.js

@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   formatDensity: _propTypes.default.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.default.object,
   /**
@@ -147,12 +147,12 @@ process.env.NODE_ENV !== "production" ? DateField.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.default.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.default.object,
   /**
@@ -160,7 +160,7 @@ process.env.NODE_ENV !== "production" ? DateField.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.default.object,
   /**

package/DatePicker/DatePicker.js

@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.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.default.bool,

package/DateTimeField/DateTimeField.js

@@ -130,7 +130,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   formatDensity: _propTypes.default.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.default.object,
   /**
@@ -157,12 +157,12 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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.default.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.default.object,
   /**
@@ -170,7 +170,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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.default.object,
   /**

package/DateTimePicker/DateTimePicker.js

@@ -121,7 +121,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.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.default.bool,

package/DesktopDatePicker/DesktopDatePicker.js

@@ -20,8 +20,6 @@ var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _DateField = require("../DateField");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _dateUtils = require("../internals/utils/date-utils");
-const emptyActions = [];
-
 /**
  * Demos:
  *
@@ -56,10 +54,7 @@ const DesktopDatePicker = exports.DesktopDatePicker = /*#__PURE__*/React.forward
       field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps)),
       toolbar: (0, _extends2.default)({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: ownerState => (0, _extends2.default)({
-        actions: emptyActions
-      }, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.actionBar, ownerState))
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -69,7 +64,8 @@ const DesktopDatePicker = exports.DesktopDatePicker = /*#__PURE__*/React.forward
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date',
-    validator: _validation.validateDate
+    validator: _validation.validateDate,
+    steps: null
   });
   return renderPicker();
 });
@@ -121,7 +117,7 @@ DesktopDatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.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.default.bool,

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -143,7 +143,8 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
     validator: _validation.validateDateTime,
-    rendererInterceptor
+    rendererInterceptor,
+    steps: null
   });
   return renderPicker();
 });
@@ -210,7 +211,7 @@ DesktopDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.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.default.bool,

package/DesktopTimePicker/DesktopTimePicker.js

@@ -80,7 +80,8 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    validator: _validation.validateTime
+    validator: _validation.validateTime,
+    steps: null
   });
   return renderPicker();
 });
@@ -135,7 +136,7 @@ DesktopTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.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.default.bool,

package/DigitalClock/DigitalClock.js

@@ -48,6 +48,7 @@ const DigitalClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerViewRoot, {
 })({
   overflowY: 'auto',
   width: '100%',
+  scrollbarWidth: 'thin',
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: 'auto'
   },

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -15,7 +15,7 @@ export interface LocalizationProviderProps<TLocale> {
   children?: React.ReactNode;
   /**
    * Date library adapter class function.
-   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter date adapter setup section} for more details.
+   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/quickstart/#integrate-provider-and-adapter date adapter setup section} for more details.
    */
   dateAdapter?: new (...args: any) => MuiPickersAdapter<TLocale>;
   /** Formats that are used for any child pickers */

package/LocalizationProvider/LocalizationProvider.js

@@ -70,7 +70,7 @@ const LocalizationProvider = exports.LocalizationProvider = function Localizatio
       instance: dateLibInstance
     });
     if (!adapter.isMUIAdapter) {
-      throw new Error(['MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`', "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", 'More information on the installation documentation: https://mui.com/x/react-date-pickers/getting-started/#installation'].join(`\n`));
+      throw new Error(['MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`', "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", 'More information on the installation documentation: https://mui.com/x/react-date-pickers/quickstart/#installation'].join(`\n`));
     }
     return adapter;
   }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);
@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   children: _propTypes.default.node,
   /**
    * Date library adapter class function.
-   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter date adapter setup section} for more details.
+   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/quickstart/#integrate-provider-and-adapter date adapter setup section} for more details.
    */
   dateAdapter: _propTypes.default.func,
   /**

package/MobileDatePicker/MobileDatePicker.js

@@ -62,7 +62,8 @@ const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date',
-    validator: _validation.validateDate
+    validator: _validation.validateDate,
+    steps: null
   });
   return renderPicker();
 });
@@ -114,7 +115,7 @@ MobileDatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.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.default.bool,

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -25,6 +25,13 @@ var _dimensions = require("../internals/constants/dimensions");
 var _MultiSectionDigitalClock = require("../MultiSectionDigitalClock");
 var _utils2 = require("../internals/utils/utils");
 var _DigitalClock = require("../DigitalClock");
+var _timeUtils = require("../internals/utils/time-utils");
+var _dateUtils = require("../internals/utils/date-utils");
+const STEPS = [{
+  views: _dateUtils.DATE_VIEWS
+}, {
+  views: _timeUtils.EXPORTED_TIME_VIEWS
+}];
 /**
  * Demos:
  *
@@ -105,7 +112,8 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    validator: _validation.validateDateTime
+    validator: _validation.validateDateTime,
+    steps: STEPS
   });
   return renderPicker();
 });
@@ -172,7 +180,7 @@ MobileDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.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.default.bool,

package/MobileTimePicker/MobileTimePicker.js

@@ -65,7 +65,8 @@ const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    validator: _validation.validateTime
+    validator: _validation.validateTime,
+    steps: null
   });
   return renderPicker();
 });
@@ -120,7 +121,7 @@ MobileTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.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.default.bool,

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -40,6 +40,7 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   width: 56,
   padding: 0,
   overflow: 'hidden',
+  scrollbarWidth: 'thin',
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: 'auto'
   },

package/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/PickersActionBar/PickersActionBar.js

@@ -44,8 +44,10 @@ function PickersActionBarComponent(props) {
     clearValue,
     setValueToToday,
     acceptValueChanges,
-    cancelValueChanges
-  } = (0, _hooks.usePickerActionsContext)();
+    cancelValueChanges,
+    goToNextStep,
+    hasNextStep
+  } = (0, _hooks.usePickerContext)();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -71,6 +73,22 @@ function PickersActionBarComponent(props) {
           onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
+      case 'next':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: goToNextStep,
+          children: translations.nextStepButtonLabel
+        }, actionType);
+      case 'nextOrAccept':
+        if (hasNextStep) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            onClick: goToNextStep,
+            children: translations.nextStepButtonLabel
+          }, actionType);
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: acceptValueChanges,
+          children: translations.okButtonLabel
+        }, actionType);
       default:
         return null;
     }
@@ -91,7 +109,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.default.arrayOf(_propTypes.default.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
+  actions: _propTypes.default.arrayOf(_propTypes.default.oneOf(['accept', 'cancel', 'clear', 'next', 'nextOrAccept', 'today']).isRequired),
   /**
    * If `true`, the actions do not have additional margin.
    * @default false

package/PickersLayout/usePickerLayout.js

@@ -40,7 +40,8 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const usePickerLayout = props => {
   const {
-    ownerState: pickerOwnerState
+    ownerState: pickerOwnerState,
+    defaultActionBarActions
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     view
@@ -63,7 +64,7 @@ const usePickerLayout = props => {
       elementType: ActionBar,
       externalSlotProps: slotProps?.actionBar,
       additionalProps: {
-        actions: ['cancel', 'accept']
+        actions: defaultActionBarActions
       },
       className: classes.actionBar,
       ownerState

package/PickersSectionList/PickersSectionList.types.d.ts

@@ -25,7 +25,9 @@ export interface PickersSectionListSlotProps {
 }
 export interface PickersSectionElement {
   container: React.HTMLAttributes<HTMLSpanElement>;
-  content: React.HTMLAttributes<HTMLSpanElement>;
+  content: React.HTMLAttributes<HTMLSpanElement> & {
+    'data-range-position': string | undefined;
+  };
   before: React.HTMLAttributes<HTMLSpanElement>;
   after: React.HTMLAttributes<HTMLSpanElement>;
 }

package/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -254,6 +254,7 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: _propTypes.default.bool.isRequired,
+  'data-multi-input': _propTypes.default.string,
   disableUnderline: _propTypes.default.bool,
   /**
    * The elements to render.

package/PickersTextField/PickersFilledInput/pickersFilledInputClasses.d.ts

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

package/PickersTextField/PickersInput/PickersInput.js

@@ -170,6 +170,7 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: _propTypes.default.bool.isRequired,
+  'data-multi-input': _propTypes.default.string,
   disableUnderline: _propTypes.default.bool,
   /**
    * The elements to render.

package/PickersTextField/PickersInput/pickersInputClasses.d.ts

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

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -150,6 +150,34 @@ const PickersInputBaseInput = (0, _styles.styled)('input', {
   slot: 'Input',
   overridesResolver: (props, styles) => styles.hiddenInput
 })((0, _extends2.default)({}, _visuallyHidden.default));
+const PickersInputBaseActiveBar = (0, _styles.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,
@@ -169,10 +197,39 @@ const useUtilityClasses = (classes, ownerState) => {
     sectionsContainer: ['sectionsContainer'],
     sectionContent: ['sectionContent'],
     sectionBefore: ['sectionBefore'],
-    sectionAfter: ['sectionAfter']
+    sectionAfter: ['sectionAfter'],
+    activeBar: ['activeBar']
   };
   return (0, _composeClasses.default)(slots, _pickersInputBaseClasses.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.
@@ -211,6 +268,8 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerStateContext = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
   const rootRef = React.useRef(null);
+  const activeBarRef = React.useRef(null);
+  const sectionOffsetsRef = React.useRef([]);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
   const handleInputRef = (0, _useForkRef.default)(inputProps?.ref, inputRef);
   const muiFormControl = (0, _FormControl.useFormControl)();
@@ -225,6 +284,24 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
   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);
@@ -258,6 +335,20 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     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__*/(0, _jsxRuntime.jsxs)(InputRoot, (0, _extends2.default)({}, inputRootProps, {
     children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersSectionList.Unstable_PickersSectionList, {
       sectionListRef: sectionListRef,
@@ -269,7 +360,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
-      onKeyDown: onKeyDown,
+      onKeyDown: handleKeyDown,
       slots: {
         root: InputSectionsContainer,
         section: PickersInputBaseSection,
@@ -306,7 +397,13 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       onFocus: handleHiddenInputFocus
     }, inputProps, {
       ref: handleInputRef
-    }))]
+    })), isSingleInputRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputBaseActiveBar, {
+      className: classes.activeBar,
+      ref: activeBarRef,
+      ownerState: {
+        sectionOffsets: sectionOffsetsRef.current
+      }
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
@@ -327,6 +424,7 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * Useful when all the sections are selected.
    */
   contentEditable: _propTypes.default.bool.isRequired,
+  'data-multi-input': _propTypes.default.string,
   /**
    * The elements to render.
    * Each element contains the prop to edit a section of the value.

package/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/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/PickersTextField/PickersInputBase/pickersInputBaseClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getPickersInputBaseUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPickersInputBase', slot);
 }
-const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input']);
+const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'activeBar']);

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

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

package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts

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