@mui/x-date-pickers-pro 6.0.0-alpha.11 → 6.0.0-alpha.13

package/node/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -20,7 +20,6 @@ const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const useDesktopRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
@@ -31,6 +30,7 @@ const useDesktopRangePicker = ({
     format,
     readOnly,
     disabled,
+    autoFocus,
     disableOpenPicker,
     localeText
   } = props;
@@ -48,8 +48,8 @@ const useDesktopRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'desktop',
-    viewLookup,
     validator,
+    autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange: setRangePosition
@@ -64,12 +64,13 @@ const useDesktopRangePicker = ({
     });
   };
   const fieldSlotsProps = (0, _useRangePickerInputProps.useRangePickerInputProps)({
-    wrapperVariant: 'mobile',
+    wrapperVariant: 'desktop',
     open,
     actions,
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     onBlur: handleBlur,
     rangePosition,
     onRangePositionChange: setRangePosition
@@ -83,6 +84,7 @@ const useDesktopRangePicker = ({
       disabled,
       className,
       format,
+      autoFocus: autoFocus && !props.open,
       ref: fieldRef
     }),
     ownerState: props
@@ -98,7 +100,7 @@ const useDesktopRangePicker = ({
       const inputPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.componentsProps?.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return (0, _extends2.default)({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps, inputPropsPassedByPicker?.inputProps)
+        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {

package/node/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -20,7 +20,6 @@ const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const useMobileRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
@@ -46,8 +45,8 @@ const useMobileRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'mobile',
-    viewLookup,
     validator,
+    autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange: setRangePosition
@@ -60,6 +59,7 @@ const useMobileRangePicker = ({
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     rangePosition,
     onRangePositionChange: setRangePosition
   });
@@ -68,7 +68,7 @@ const useMobileRangePicker = ({
     elementType: Field,
     externalSlotProps: componentsProps.field,
     additionalProps: (0, _extends2.default)({}, pickerFieldProps, {
-      readOnly,
+      readOnly: readOnly ?? true,
       disabled,
       className,
       format,
@@ -85,7 +85,7 @@ const useMobileRangePicker = ({
       const inputPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.componentsProps?.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return (0, _extends2.default)({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps, inputPropsPassedByPicker?.inputProps)
+        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {

package/node/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -28,7 +28,9 @@ const useMultiInputDateRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -55,6 +57,8 @@ const useMultiInputDateRangeField = ({
   const handleStartDateChange = (0, _useEventCallback.default)(buildChangeHandler(0));
   const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const startInputProps = (0, _extends2.default)({}, inStartInputProps, {
+    disabled,
+    readOnly,
     format,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -62,6 +66,8 @@ const useMultiInputDateRangeField = ({
   });
   const endInputProps = (0, _extends2.default)({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/node/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -44,7 +44,9 @@ const useMultiInputDateTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -72,12 +74,16 @@ const useMultiInputDateTimeRangeField = ({
   const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const startInputProps = (0, _extends2.default)({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = (0, _extends2.default)({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/node/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -40,7 +40,9 @@ const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -68,12 +70,16 @@ const useMultiInputTimeRangeField = ({
   const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const startInputProps = (0, _extends2.default)({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = (0, _extends2.default)({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/node/internal/hooks/useRangePickerInputProps.js

@@ -19,7 +19,8 @@ const useRangePickerInputProps = ({
   disableOpenPicker,
   onBlur,
   rangePosition,
-  onRangePositionChange
+  onRangePositionChange,
+  localeText: inLocaleText
 }) => {
   const localeText = (0, _internals.useLocaleText)();
   const startRef = React.useRef(null);
@@ -35,14 +36,14 @@ const useRangePickerInputProps = ({
     }
   }, [rangePosition, open]);
   const openRangeStartSelection = event => {
-    event?.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
     }
   };
   const openRangeEndSelection = event => {
-    event?.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
@@ -58,31 +59,30 @@ const useRangePickerInputProps = ({
       onRangePositionChange('end');
     }
   };
+  const readOnlyInput = readOnly ?? wrapperVariant === 'mobile';
   const startInputProps = (0, _extends2.default)({
     inputRef: startRef,
-    label: localeText.start,
+    label: inLocaleText?.start ?? localeText.start,
     onKeyDown: (0, _internals.onSpaceOrEnter)(openRangeStartSelection),
     onFocus: focusOnRangeStart,
     focused: open ? rangePosition === 'start' : undefined
   }, !readOnly && !disabled && {
     onClick: openRangeStartSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const endInputProps = (0, _extends2.default)({
     inputRef: endRef,
-    label: localeText.end,
+    label: inLocaleText?.end ?? localeText.end,
     onKeyDown: (0, _internals.onSpaceOrEnter)(openRangeEndSelection),
     onFocus: focusOnRangeEnd,
     focused: open ? rangePosition === 'end' : undefined
   }, !readOnly && !disabled && {
     onClick: openRangeEndSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const rootProps = {
     onBlur

package/node/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -28,7 +28,6 @@ const PickerStaticViewLayout = (0, _styles.styled)(_internals.PickersViewLayout)
 const useStaticRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator,
   ref
 }) => {
@@ -36,7 +35,8 @@ const useStaticRangePicker = ({
     localeText,
     components,
     componentsProps,
-    displayStaticWrapperAs
+    displayStaticWrapperAs,
+    autoFocus
   } = props;
   const [rangePosition, setRangePosition] = React.useState('start');
   const {
@@ -44,9 +44,9 @@ const useStaticRangePicker = ({
     renderCurrentView
   } = (0, _internals.usePicker)({
     props,
-    viewLookup,
     valueManager,
     validator,
+    autoFocusView: autoFocus ?? false,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   });

package/node/internal/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY3MDQ1NDAwMDAwMA==";
+  const releaseInfo = "MTY3MTgzMjgwMDAwMA==";
   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/node/internal/utils/valueManagers.js

@@ -37,36 +37,29 @@ const rangeFieldValueManager = {
       startDate: null,
       endDate: null
     } : (0, _dateFieldsUtils.splitDateRangeSections)(prevSections);
-    const getSections = (newDate, prevDateSections) => {
+    const getSections = (newDate, prevDateSections, position) => {
       const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
       if (shouldReUsePrevDateSections) {
         return prevDateSections;
       }
-      return (0, _internals.splitFormatIntoSections)(utils, localeText, format, newDate);
-    };
-    const rawSectionsOfStartDate = getSections(start, prevDateRangeSections.startDate);
-    const rawSectionsOfEndDate = getSections(end, prevDateRangeSections.endDate);
-    const sectionsOfStartDate = rawSectionsOfStartDate.map((section, sectionIndex) => {
-      if (sectionIndex === rawSectionsOfStartDate.length - 1) {
+      const sections = (0, _internals.splitFormatIntoSections)(utils, localeText, format, newDate);
+      return sections.map((section, sectionIndex) => {
+        if (sectionIndex === sections.length - 1 && position === 'start') {
+          return (0, _extends2.default)({}, section, {
+            dateName: position,
+            endSeparator: `${section.endSeparator}\u2069 – \u2066`
+          });
+        }
         return (0, _extends2.default)({}, section, {
-          dateName: 'start',
-          separator: ' – '
+          dateName: position
         });
-      }
-      return (0, _extends2.default)({}, section, {
-        dateName: 'start'
       });
-    });
-    const sectionsOfEndDate = rawSectionsOfEndDate.map(section => (0, _extends2.default)({}, section, {
-      dateName: 'end'
-    }));
-    return (0, _internals.addPositionPropertiesToSections)([...sectionsOfStartDate, ...sectionsOfEndDate]);
+    };
+    return (0, _internals.addPositionPropertiesToSections)([...getSections(start, prevDateRangeSections.startDate, 'start'), ...getSections(end, prevDateRangeSections.endDate, 'end')]);
   },
   getValueStrFromSections: sections => {
     const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
-    const startDateStr = (0, _internals.createDateStrFromSections)(dateRangeSections.startDate, true);
-    const endDateStr = (0, _internals.createDateStrFromSections)(dateRangeSections.endDate, true);
-    return `${startDateStr}${endDateStr}`;
+    return (0, _internals.createDateStrForInputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
   },
   getActiveDateSections: (sections, activeSection) => {
     const index = activeSection.dateName === 'start' ? 0 : 1;
@@ -95,6 +88,12 @@ const rangeFieldValueManager = {
       })
     };
   },
-  hasError: error => error[0] != null || error[1] != null
+  hasError: error => error[0] != null || error[1] != null,
+  getSectionOrder: (utils, localeText, format, isRTL) => {
+    const splitedFormat = (0, _internals.splitFormatIntoSections)(utils, localeText, format, null);
+    return (0, _internals.getSectionOrder)([...splitedFormat.slice(0, splitedFormat.length - 1), (0, _extends2.default)({}, splitedFormat[splitedFormat.length - 1], {
+      endSeparator: ' – '
+    }), ...splitedFormat], isRTL);
+  }
 };
 exports.rangeFieldValueManager = rangeFieldValueManager;

package/node/tests/describeRangeValidation/testTextFieldRangeValidation.js

@@ -34,7 +34,7 @@ const testTextFieldRangeValidation = (ElementToTest, getOptions) => {
     withDate,
     withTime
   } = getOptions();
-  if (!['legacy-picker', 'picker'].includes(componentFamily)) {
+  if (!['legacy-picker', 'new-picker'].includes(componentFamily)) {
     return;
   }
   describe('text field:', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.13",
   "description": "The commercial edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -30,13 +30,13 @@
     "directory": "packages/x-date-pickers-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@date-io/date-fns": "^2.16.0",
     "@date-io/dayjs": "^2.16.0",
     "@date-io/luxon": "^2.16.1",
     "@date-io/moment": "^2.16.1",
     "@mui/utils": "^5.10.16",
-    "@mui/x-date-pickers": "6.0.0-alpha.11",
+    "@mui/x-date-pickers": "6.0.0-alpha.13",
     "@mui/x-license-pro": "6.0.0-alpha.9",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
@@ -48,7 +48,7 @@
     "@mui/system": "^5.4.1",
     "date-fns": "^2.25.0",
     "dayjs": "^1.10.7",
-    "luxon": "^1.28.0 || ^2.0.0 || ^3.0.2",
+    "luxon": "^3.0.2",
     "moment": "^2.29.1",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"

package/tests/describeRangeValidation/testTextFieldRangeValidation.js

@@ -26,7 +26,7 @@ export const testTextFieldRangeValidation = (ElementToTest, getOptions) => {
     withDate,
     withTime
   } = getOptions();
-  if (!['legacy-picker', 'picker'].includes(componentFamily)) {
+  if (!['legacy-picker', 'new-picker'].includes(componentFamily)) {
     return;
   }
   describe('text field:', () => {

package/internal/utils/viewRenderers.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { DateRangeCalendarProps } from '../../DateRangeCalendar';
-/**
- * We don't pass all the props down to `DateRangeCalendar`,
- * because otherwise some unwanted props would be passed to the HTML element.
- */
-export declare const renderDateRangeView: <TDate extends unknown>({ value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, defaultCalendarMonth, rangePosition, onRangePositionChange, calendars, components, componentsProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, }: DateRangeCalendarProps<TDate>) => JSX.Element;