@mui/x-date-pickers-pro 7.0.0 → 7.1.1

package/node/DateRangePicker/DateRangePicker.js

@@ -83,7 +83,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/DateRangePickerDay/DateRangePickerDay.js

@@ -77,26 +77,56 @@ const DateRangePickerDayRoot = (0, _styles.styled)('div', {
     [`&.${_dateRangePickerDayClasses.dateRangePickerDayClasses.hiddenDayFiller}`]: styles.hiddenDayFiller
   }, styles.root]
 })(({
-  theme,
-  ownerState
-}) => ownerState.isHiddenDayFiller ? {} : (0, _extends2.default)({
-  [`&:first-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, startBorderStyle, {
-    borderLeftColor: (theme.vars || theme).palette.divider
-  }),
-  [`&:last-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, endBorderStyle, {
-    borderRightColor: (theme.vars || theme).palette.divider
-  })
-}, ownerState.isHighlighting && {
-  borderRadius: 0,
-  color: (theme.vars || theme).palette.primary.contrastText,
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity),
-  '&:first-of-type': startBorderStyle,
-  '&:last-of-type': endBorderStyle
-}, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && (0, _extends2.default)({}, startBorderStyle, {
-  paddingLeft: 0
-}), (ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && (0, _extends2.default)({}, endBorderStyle, {
-  paddingRight: 0
-})));
+  theme
+}) => ({
+  variants: [{
+    props: {
+      isHiddenDayFiller: false
+    },
+    style: {
+      [`&:first-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, startBorderStyle, {
+        borderLeftColor: (theme.vars || theme).palette.divider
+      }),
+      [`&:last-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, endBorderStyle, {
+        borderRightColor: (theme.vars || theme).palette.divider
+      })
+    }
+  }, {
+    props: {
+      isHiddenDayFiller: false,
+      isHighlighting: true
+    },
+    style: {
+      borderRadius: 0,
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity),
+      '&:first-of-type': startBorderStyle,
+      '&:last-of-type': endBorderStyle
+    }
+  }, {
+    props: ({
+      ownerState: {
+        isHiddenDayFiller,
+        isStartOfHighlighting,
+        isFirstVisibleCell
+      }
+    }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+    style: (0, _extends2.default)({}, startBorderStyle, {
+      paddingLeft: 0
+    })
+  }, {
+    props: ({
+      ownerState: {
+        isHiddenDayFiller,
+        isEndOfHighlighting,
+        isLastVisibleCell
+      }
+    }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+    style: (0, _extends2.default)({}, endBorderStyle, {
+      paddingRight: 0
+    })
+  }]
+}));
 DateRangePickerDayRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -115,21 +145,47 @@ const DateRangePickerDayRangeIntervalPreview = (0, _styles.styled)('div', {
     [`&.${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
   }, styles.rangeIntervalPreview]
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   // replace default day component margin with transparent border to avoid jumping on preview
-  border: '2px solid transparent'
-}, ownerState.isPreviewing && !ownerState.isHiddenDayFiller && (0, _extends2.default)({
-  borderRadius: 0,
-  border: `2px dashed ${(theme.vars || theme).palette.divider}`,
-  borderLeftColor: 'transparent',
-  borderRightColor: 'transparent'
-}, (ownerState.isStartOfPreviewing || ownerState.isFirstVisibleCell) && (0, _extends2.default)({
-  borderLeftColor: (theme.vars || theme).palette.divider
-}, startBorderStyle), (ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && (0, _extends2.default)({
-  borderRightColor: (theme.vars || theme).palette.divider
-}, endBorderStyle))));
+  border: '2px solid transparent',
+  variants: [{
+    props: {
+      isPreviewing: true,
+      isHiddenDayFiller: false
+    },
+    style: {
+      borderRadius: 0,
+      border: `2px dashed ${(theme.vars || theme).palette.divider}`,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent'
+    }
+  }, {
+    props: ({
+      ownerState: {
+        isPreviewing,
+        isHiddenDayFiller,
+        isStartOfPreviewing,
+        isFirstVisibleCell
+      }
+    }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+    style: (0, _extends2.default)({
+      borderLeftColor: (theme.vars || theme).palette.divider
+    }, startBorderStyle)
+  }, {
+    props: ({
+      ownerState: {
+        isPreviewing,
+        isHiddenDayFiller,
+        isEndOfPreviewing,
+        isLastVisibleCell
+      }
+    }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+    style: (0, _extends2.default)({
+      borderRightColor: (theme.vars || theme).palette.divider
+    }, endBorderStyle)
+  }]
+}));
 DateRangePickerDayRangeIntervalPreview.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -147,19 +203,22 @@ const DateRangePickerDayDay = (0, _styles.styled)(_PickersDay.PickersDay, {
   }, {
     [`&.${_dateRangePickerDayClasses.dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
   }, styles.day]
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   // Required to overlap preview border
   transform: 'scale(1.1)',
   '& > *': {
     transform: 'scale(0.9)'
-  }
-}, ownerState.draggable && {
-  cursor: 'grab'
-}, ownerState.draggable && {
-  touchAction: 'none'
-}));
+  },
+  variants: [{
+    props: {
+      draggable: true
+    },
+    style: {
+      cursor: 'grab',
+      touchAction: 'none'
+    }
+  }]
+});
 const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -275,6 +334,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableTouchRipple: _propTypes.default.bool,
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable: _propTypes.default.bool,
   /**
    * If `true`, the base button will have a keyboard focus ripple.
    * @default false

package/node/DateTimeRangePicker/DateTimeRangePicker.js

@@ -58,7 +58,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -88,7 +88,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimeRangePickerToolbar = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _clsx = _interopRequireDefault(require("clsx"));
@@ -43,24 +43,40 @@ const DateTimeRangePickerToolbarStart = (0, _styles.styled)(_DateTimePicker.Date
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'StartToolbar',
   overridesResolver: (_, styles) => styles.startToolbar
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  borderBottom: 'none'
-}, ownerState?.toolbarVariant !== 'desktop' ? {
-  padding: '12px 8px 0 12px'
-} : {
-  paddingBottom: 0
-}));
+})({
+  borderBottom: 'none',
+  variants: [{
+    props: ({
+      toolbarVariant
+    }) => toolbarVariant !== 'desktop',
+    style: {
+      padding: '12px 8px 0 12px'
+    }
+  }, {
+    props: {
+      toolbarVariant: 'desktop'
+    },
+    style: {
+      paddingBottom: 0
+    }
+  }]
+});
 const DateTimeRangePickerToolbarEnd = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'EndToolbar',
   overridesResolver: (_, styles) => styles.endToolbar
-})(({
-  ownerState
-}) => ({
-  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
-}));
+})({
+  variants: [{
+    props: ({
+      ownerState: {
+        toolbarVariant
+      }
+    }) => toolbarVariant !== 'desktop',
+    style: {
+      padding: '12px 8px 12px 12px'
+    }
+  }]
+});
 const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -94,7 +94,7 @@ DesktopDateRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -133,7 +133,7 @@ DesktopDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -163,7 +163,7 @@ DesktopDateTimeRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -90,7 +90,7 @@ MobileDateRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -141,7 +141,7 @@ MobileDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -166,7 +166,7 @@ MobileDateTimeRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -272,7 +272,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
    * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
    *
-   * @default `false`
+   * @default false
    */
   shouldRespectLeadingZeros: _propTypes.default.bool,
   /**

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -313,7 +313,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
    * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
    *
-   * @default `false`
+   * @default false
    */
   shouldRespectLeadingZeros: _propTypes.default.bool,
   /**

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -286,7 +286,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
    * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
    *
-   * @default `false`
+   * @default false
    */
   shouldRespectLeadingZeros: _propTypes.default.bool,
   /**

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -276,7 +276,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
    * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
    *
-   * @default `false`
+   * @default false
    */
   shouldRespectLeadingZeros: _propTypes.default.bool,
   /**

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -74,7 +74,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -317,7 +317,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
    * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
    *
-   * @default `false`
+   * @default false
    */
   shouldRespectLeadingZeros: _propTypes.default.bool,
   /**

package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -74,7 +74,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * @default utils.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**
@@ -290,7 +290,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
    * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
    *
-   * @default `false`
+   * @default false
    */
   shouldRespectLeadingZeros: _propTypes.default.bool,
   /**

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -83,7 +83,7 @@ StaticDateRangePicker.propTypes = {
    * Formats the day of week displayed in the calendar header.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0
+ * @mui/x-date-pickers-pro v7.1.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -230,7 +230,7 @@ const useSingleInputFieldSlotProps = ({
     InputProps: (0, _extends2.default)({
       ref: anchorRef
     }, fieldProps?.InputProps),
-    focused: open
+    focused: open ? true : undefined
   }, labelId != null && {
     id: labelId
   }, wrapperVariant === 'mobile' && {

package/node/internals/utils/date-range-manager.js

@@ -44,7 +44,7 @@ function calculateRangeChange({
     nextSelection: 'end',
     newRange: [selectedDate, null]
   };
-  return Boolean(start) && utils.isBefore(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
     nextSelection: 'start',
     newRange: [start, selectedDate]
   };

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcxMTA1ODQwMDAwMA==";
+  const releaseInfo = "MTcxMjI2NDQwMDAwMA==";
   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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.0.0",
-  "description": "The commercial edition of the date picker components (MUI X).",
+  "version": "7.1.1",
+  "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,8 +35,8 @@
     "@mui/base": "^5.0.0-beta.40",
     "@mui/system": "^5.15.14",
     "@mui/utils": "^5.15.14",
-    "@mui/x-date-pickers": "7.0.0",
-    "@mui/x-license": "7.0.0",
+    "@mui/x-date-pickers": "7.1.1",
+    "@mui/x-license": "7.1.1",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"