@mui/x-date-pickers-pro 7.0.0-beta.1 → 7.0.0-beta.4

package/modern/internals/hooks/useRangePosition.js

@@ -1,8 +1,6 @@
-import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
-export const useRangePosition = props => {
-  const singleInputFieldRef = React.useRef();
+export const useRangePosition = (props, singleInputFieldRef) => {
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
@@ -13,7 +11,7 @@ export const useRangePosition = props => {
   // When using a single input field,
   // we want to select the 1st section of the edited date when updating the range position.
   const syncRangePositionWithSingleInputField = newRangePosition => {
-    if (singleInputFieldRef.current == null) {
+    if (singleInputFieldRef?.current == null) {
       return;
     }
     const sections = singleInputFieldRef.current.getSections();
@@ -27,7 +25,6 @@ export const useRangePosition = props => {
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange,
-    singleInputFieldRef
+    onRangePositionChange: handleRangePositionChange
   };
 };

package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -46,6 +46,7 @@ export const useStaticRangePicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
+    fieldRef: undefined,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange

package/modern/internals/models/index.js

@@ -1,5 +1,4 @@
 export * from './dateRange';
 export * from './dateTimeRange';
 export * from './timeRange';
-export * from './fields';
 export * from './rangePickerProps';

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwNjczODQwMDAwMA==";
+  const releaseInfo = "MTcwODYyODQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/internals/utils/valueManagers.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "referenceDate"];
-import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual, getTodayDate, getDefaultReferenceDate } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, areDatesEqual, getTodayDate, getDefaultReferenceDate } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -50,7 +50,7 @@ export const rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, localizedDigits, isRTL, getSectionsFromDate) => {
+  getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => {
     const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
@@ -65,7 +65,8 @@ export const rangeFieldValueManager = {
         if (sectionIndex === sections.length - 1 && position === 'start') {
           return _extends({}, section, {
             dateName: position,
-            endSeparator: `${section.endSeparator}${isRTL ? '\u2069 – \u2066' : ' – '}`
+            // TODO: Check if RTL still works
+            endSeparator: `${section.endSeparator} – `
           });
         }
         return _extends({}, section, {
@@ -73,11 +74,15 @@ export const rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], localizedDigits, isRTL);
+    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
   },
-  getValueStrFromSections: (sections, localizedDigits, isRTL) => {
+  getV7HiddenInputValueFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
+    return createDateStrForV7HiddenInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
+  },
+  getV6InputValueFromSections: (sections, localizedDigits, isRTL) => {
+    const dateRangeSections = splitDateRangeSections(sections);
+    return createDateStrForV6InputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if the date format has `–` as a separator.

package/modern/models/index.js

@@ -1,3 +1,4 @@
+export * from './fields';
 export * from './range';
 export * from './validation';
 export * from './multiInputRangeFieldClasses';

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -15,7 +15,7 @@ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery
 var _utils = require("@mui/base/utils");
 var _styles = require("@mui/material/styles");
 var _utils2 = require("@mui/utils");
-var _xLicensePro = require("@mui/x-license-pro");
+var _xLicense = require("@mui/x-license");
 var _PickersCalendarHeader = require("@mui/x-date-pickers/PickersCalendarHeader");
 var _internals = require("@mui/x-date-pickers/internals");
 var _releaseInfo = require("../internals/utils/releaseInfo");
@@ -467,7 +467,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     className: (0, _clsx.default)(className, classes.root),
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicensePro.Watermark, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
       packageName: "x-date-pickers-pro",
       releaseInfo: releaseInfo
     }), calendarMonths.map((month, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarMonthContainer, {
@@ -534,6 +534,9 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default 2
    */
   calendars: _propTypes.default.oneOf([1, 2, 3]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
@@ -558,7 +561,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The default selected value.
    * Used when the component is not controlled.
    */
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.any),
+  defaultValue: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
    * @default false
@@ -596,7 +599,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: _propTypes.default.number,
   /**
@@ -612,11 +614,11 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: _propTypes.default.any,
+  maxDate: _propTypes.default.object,
   /**
    * Minimal selectable date.
    */
-  minDate: _propTypes.default.any,
+  minDate: _propTypes.default.object,
   /**
    * Callback fired when the value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -675,7 +677,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
    */
-  referenceDate: _propTypes.default.any,
+  referenceDate: _propTypes.default.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -730,7 +732,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any),
+  value: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * The visible view.
    * Used when the component view is controlled.

package/node/DateRangePicker/DateRangePicker.js

@@ -96,7 +96,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.any),
+  defaultValue: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'
@@ -142,10 +142,13 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * If `true`, the week number will be display in the calendar.
    */
   displayWeekNumber: _propTypes.default.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: _propTypes.default.number,
   /**
@@ -183,11 +186,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: _propTypes.default.any,
+  maxDate: _propTypes.default.object,
   /**
    * Minimal selectable date.
    */
-  minDate: _propTypes.default.any,
+  minDate: _propTypes.default.object,
   /**
    * Name attribute used by the `input` element in the Field.
    * Ignored if the field has several inputs.
@@ -263,7 +266,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.any,
+  referenceDate: _propTypes.default.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -272,17 +275,14 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   renderLoading: _propTypes.default.func,
   /**
    * The currently selected sections.
-   * This prop accept four formats:
+   * This prop accepts four formats:
    * 1. If a number is provided, the section at this index will be selected.
-   * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-   * 4. If `null` is provided, no section will be selected
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
-    endIndex: _propTypes.default.number.isRequired,
-    startIndex: _propTypes.default.number.isRequired
-  })]),
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
   /**
    * Disable specific date.
    *
@@ -331,7 +331,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any),
+  value: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -101,6 +101,9 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
@@ -112,6 +115,9 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   readOnly: _propTypes.default.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   titleId: _propTypes.default.string,
   /**
@@ -123,5 +129,5 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.arrayOf(_propTypes.default.any).isRequired
+  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

package/node/DateRangePickerDay/DateRangePickerDay.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _xLicensePro = require("@mui/x-license-pro");
+var _xLicense = require("@mui/x-license");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _internals = require("@mui/x-date-pickers/internals");
@@ -179,7 +179,7 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       isLastVisibleCell
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
   const utils = (0, _internals.useUtils)();
   const isEndOfMonth = utils.isSameDay(day, utils.endOfMonth(day));
   const isStartOfMonth = utils.isSameDay(day, utils.startOfMonth(day));
@@ -246,7 +246,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
   /**
    * The date to show.
    */
-  day: _propTypes.default.any.isRequired,
+  day: _propTypes.default.object.isRequired,
   /**
    * If `true`, renders as disabled.
    * @default false

package/node/DateTimeRangePicker/DateTimeRangePicker.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _styles = require("@mui/material/styles");
 var _DesktopDateTimeRangePicker = require("../DesktopDateTimeRangePicker");
@@ -90,7 +91,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.any),
+  defaultValue: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'
@@ -141,10 +142,13 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * If `true`, the week number will be display in the calendar.
    */
   displayWeekNumber: _propTypes.default.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: _propTypes.default.number,
   /**
@@ -162,9 +166,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.
    */
-  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.object
-  })]),
+  inputRef: _utils.refType,
   /**
    * The label content.
    * Ignored if the field has several inputs.
@@ -184,29 +186,29 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: _propTypes.default.any,
+  maxDate: _propTypes.default.object,
   /**
    * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
    */
-  maxDateTime: _propTypes.default.any,
+  maxDateTime: _propTypes.default.object,
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  maxTime: _propTypes.default.any,
+  maxTime: _propTypes.default.object,
   /**
    * Minimal selectable date.
    */
-  minDate: _propTypes.default.any,
+  minDate: _propTypes.default.object,
   /**
    * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
    */
-  minDateTime: _propTypes.default.any,
+  minDateTime: _propTypes.default.object,
   /**
    * Minimal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  minTime: _propTypes.default.any,
+  minTime: _propTypes.default.object,
   /**
    * Step over minutes.
    * @default 1
@@ -299,7 +301,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.any,
+  referenceDate: _propTypes.default.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -308,17 +310,14 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   renderLoading: _propTypes.default.func,
   /**
    * The currently selected sections.
-   * This prop accept four formats:
+   * This prop accepts four formats:
    * 1. If a number is provided, the section at this index will be selected.
-   * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-   * 4. If `null` is provided, no section will be selected
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
-    endIndex: _propTypes.default.number.isRequired,
-    startIndex: _propTypes.default.number.isRequired
-  })]),
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
   /**
    * Disable specific date.
    *
@@ -396,7 +395,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any),
+  value: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * The visible view.
    * Used when the component view is controlled.

package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -84,7 +84,8 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     rangePosition,
     onRangePositionChange,
-    className
+    className,
+    sx
   } = props;
   const localeText = (0, _internals.useLocaleText)();
   const classes = useUtilityClasses(props);
@@ -128,6 +129,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerTabsRoot, {
     ownerState: props,
     className: (0, _clsx.default)(classes.root, className),
+    sx: sx,
     children: [!isPreviousHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       onClick: changeToPreviousTab,
       className: classes.navigationButton,
@@ -178,6 +180,10 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * Time tab icon.
    * @default TimeIcon

package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -143,6 +143,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   ampm: _propTypes.default.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
@@ -162,6 +165,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   readOnly: _propTypes.default.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   titleId: _propTypes.default.string,
   /**
@@ -174,7 +180,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   toolbarPlaceholder: _propTypes.default.node,
   toolbarVariant: _propTypes.default.oneOf(['desktop', 'mobile']),
-  value: _propTypes.default.arrayOf(_propTypes.default.any).isRequired,
+  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * Currently visible picker view.
    */

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -107,7 +107,7 @@ DesktopDateRangePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.any),
+  defaultValue: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
    * @default false
@@ -147,10 +147,13 @@ DesktopDateRangePicker.propTypes = {
    * If `true`, the week number will be display in the calendar.
    */
   displayWeekNumber: _propTypes.default.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: _propTypes.default.number,
   /**
@@ -188,11 +191,11 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: _propTypes.default.any,
+  maxDate: _propTypes.default.object,
   /**
    * Minimal selectable date.
    */
-  minDate: _propTypes.default.any,
+  minDate: _propTypes.default.object,
   /**
    * Name attribute used by the `input` element in the Field.
    * Ignored if the field has several inputs.
@@ -268,7 +271,7 @@ DesktopDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.any,
+  referenceDate: _propTypes.default.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -277,17 +280,14 @@ DesktopDateRangePicker.propTypes = {
   renderLoading: _propTypes.default.func,
   /**
    * The currently selected sections.
-   * This prop accept four formats:
+   * This prop accepts four formats:
    * 1. If a number is provided, the section at this index will be selected.
-   * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-   * 4. If `null` is provided, no section will be selected
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
-    endIndex: _propTypes.default.number.isRequired,
-    startIndex: _propTypes.default.number.isRequired
-  })]),
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
   /**
    * Disable specific date.
    *
@@ -336,7 +336,7 @@ DesktopDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any),
+  value: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.