@mui/x-date-pickers 7.0.0-alpha.6 → 7.0.0-alpha.8

package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -0,0 +1,287 @@
+/* eslint-disable class-methods-use-this */
+// TODO remove when date-fns-v3 is the default
+// @ts-nocheck
+import { addDays } from 'date-fns/addDays';
+import { addSeconds } from 'date-fns/addSeconds';
+import { addMinutes } from 'date-fns/addMinutes';
+import { addHours } from 'date-fns/addHours';
+import { addWeeks } from 'date-fns/addWeeks';
+import { addMonths } from 'date-fns/addMonths';
+import { addYears } from 'date-fns/addYears';
+import { endOfDay } from 'date-fns/endOfDay';
+import { endOfWeek } from 'date-fns/endOfWeek';
+import { endOfYear } from 'date-fns/endOfYear';
+// @ts-ignore TODO remove when date-fns-v3 is the default
+import { format as dateFnsFormat, longFormatters } from 'date-fns/format';
+import { getDate } from 'date-fns/getDate';
+import { getDaysInMonth } from 'date-fns/getDaysInMonth';
+import { getHours } from 'date-fns/getHours';
+import { getMinutes } from 'date-fns/getMinutes';
+import { getMonth } from 'date-fns/getMonth';
+import { getSeconds } from 'date-fns/getSeconds';
+import { getMilliseconds } from 'date-fns/getMilliseconds';
+import { getWeek } from 'date-fns/getWeek';
+import { getYear } from 'date-fns/getYear';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isEqual } from 'date-fns/isEqual';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isSameHour } from 'date-fns/isSameHour';
+import { isValid } from 'date-fns/isValid';
+import { parse as dateFnsParse } from 'date-fns/parse';
+import { setDate } from 'date-fns/setDate';
+import { setHours } from 'date-fns/setHours';
+import { setMinutes } from 'date-fns/setMinutes';
+import { setMonth } from 'date-fns/setMonth';
+import { setSeconds } from 'date-fns/setSeconds';
+import { setMilliseconds } from 'date-fns/setMilliseconds';
+import { setYear } from 'date-fns/setYear';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { startOfWeek } from 'date-fns/startOfWeek';
+import { startOfYear } from 'date-fns/startOfYear';
+import { isWithinInterval } from 'date-fns/isWithinInterval';
+import { enUS } from 'date-fns/locale/en-US';
+// date-fns v2 does not export types
+// @ts-ignore TODO remove when date-fns-v3 is the default
+
+import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+
+/**
+ * Based on `@date-io/date-fns`
+ *
+ * MIT License
+ *
+ * Copyright (c) 2017 Dmitriy Kovalenko
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export class AdapterDateFns extends AdapterDateFnsBase {
+  constructor({
+    locale,
+    formats
+  } = {}) {
+    if (typeof addDays !== 'function') {
+      throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
+    }
+    if (!longFormatters) {
+      throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');
+    }
+    super({
+      locale: locale ?? enUS,
+      formats,
+      longFormatters
+    });
+    this.parse = (value, format) => {
+      if (value === '') {
+        return null;
+      }
+      return dateFnsParse(value, format, new Date(), {
+        locale: this.locale
+      });
+    };
+    this.isValid = value => {
+      if (value == null) {
+        return false;
+      }
+      return isValid(value);
+    };
+    this.format = (value, formatKey) => {
+      return this.formatByString(value, this.formats[formatKey]);
+    };
+    this.formatByString = (value, formatString) => {
+      return dateFnsFormat(value, formatString, {
+        locale: this.locale
+      });
+    };
+    this.isEqual = (value, comparing) => {
+      if (value === null && comparing === null) {
+        return true;
+      }
+      if (value === null || comparing === null) {
+        return false;
+      }
+      return isEqual(value, comparing);
+    };
+    this.isSameYear = (value, comparing) => {
+      return isSameYear(value, comparing);
+    };
+    this.isSameMonth = (value, comparing) => {
+      return isSameMonth(value, comparing);
+    };
+    this.isSameDay = (value, comparing) => {
+      return isSameDay(value, comparing);
+    };
+    this.isSameHour = (value, comparing) => {
+      return isSameHour(value, comparing);
+    };
+    this.isAfter = (value, comparing) => {
+      return isAfter(value, comparing);
+    };
+    this.isAfterYear = (value, comparing) => {
+      return isAfter(value, endOfYear(comparing));
+    };
+    this.isAfterDay = (value, comparing) => {
+      return isAfter(value, endOfDay(comparing));
+    };
+    this.isBefore = (value, comparing) => {
+      return isBefore(value, comparing);
+    };
+    this.isBeforeYear = (value, comparing) => {
+      return isBefore(value, this.startOfYear(comparing));
+    };
+    this.isBeforeDay = (value, comparing) => {
+      return isBefore(value, this.startOfDay(comparing));
+    };
+    this.isWithinRange = (value, [start, end]) => {
+      return isWithinInterval(value, {
+        start,
+        end
+      });
+    };
+    this.startOfYear = value => {
+      return startOfYear(value);
+    };
+    this.startOfMonth = value => {
+      return startOfMonth(value);
+    };
+    this.startOfWeek = value => {
+      return startOfWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.startOfDay = value => {
+      return startOfDay(value);
+    };
+    this.endOfYear = value => {
+      return endOfYear(value);
+    };
+    this.endOfMonth = value => {
+      return endOfMonth(value);
+    };
+    this.endOfWeek = value => {
+      return endOfWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.endOfDay = value => {
+      return endOfDay(value);
+    };
+    this.addYears = (value, amount) => {
+      return addYears(value, amount);
+    };
+    this.addMonths = (value, amount) => {
+      return addMonths(value, amount);
+    };
+    this.addWeeks = (value, amount) => {
+      return addWeeks(value, amount);
+    };
+    this.addDays = (value, amount) => {
+      return addDays(value, amount);
+    };
+    this.addHours = (value, amount) => {
+      return addHours(value, amount);
+    };
+    this.addMinutes = (value, amount) => {
+      return addMinutes(value, amount);
+    };
+    this.addSeconds = (value, amount) => {
+      return addSeconds(value, amount);
+    };
+    this.getYear = value => {
+      return getYear(value);
+    };
+    this.getMonth = value => {
+      return getMonth(value);
+    };
+    this.getDate = value => {
+      return getDate(value);
+    };
+    this.getHours = value => {
+      return getHours(value);
+    };
+    this.getMinutes = value => {
+      return getMinutes(value);
+    };
+    this.getSeconds = value => {
+      return getSeconds(value);
+    };
+    this.getMilliseconds = value => {
+      return getMilliseconds(value);
+    };
+    this.setYear = (value, year) => {
+      return setYear(value, year);
+    };
+    this.setMonth = (value, month) => {
+      return setMonth(value, month);
+    };
+    this.setDate = (value, date) => {
+      return setDate(value, date);
+    };
+    this.setHours = (value, hours) => {
+      return setHours(value, hours);
+    };
+    this.setMinutes = (value, minutes) => {
+      return setMinutes(value, minutes);
+    };
+    this.setSeconds = (value, seconds) => {
+      return setSeconds(value, seconds);
+    };
+    this.setMilliseconds = (value, milliseconds) => {
+      return setMilliseconds(value, milliseconds);
+    };
+    this.getDaysInMonth = value => {
+      return getDaysInMonth(value);
+    };
+    this.getWeekArray = value => {
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
+      let count = 0;
+      let current = start;
+      const nestedWeeks = [];
+      while (this.isBefore(current, end)) {
+        const weekNumber = Math.floor(count / 7);
+        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+        nestedWeeks[weekNumber].push(current);
+        current = this.addDays(current, 1);
+        count += 1;
+      }
+      return nestedWeeks;
+    };
+    this.getWeekNumber = value => {
+      return getWeek(value, {
+        locale: this.locale
+      });
+    };
+    this.getYearRange = ([start, end]) => {
+      const startDate = this.startOfYear(start);
+      const endDate = this.endOfYear(end);
+      const years = [];
+      let current = startDate;
+      while (this.isBefore(current, endDate)) {
+        years.push(current);
+        current = this.addYears(current, 1);
+      }
+      return years;
+    };
+  }
+}

package/modern/AdapterDateFnsV3/index.js

@@ -0,0 +1 @@
+export { AdapterDateFns } from './AdapterDateFnsV3';

package/modern/DateCalendar/DateCalendar.js

@@ -252,9 +252,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const handleSelectedDayChange = useEventCallback(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish', view);
     }
-    return handleValueChange(day, 'finish');
+    return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
     if (value != null && utils.isValid(value)) {
@@ -423,9 +423,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate | null} value The new value.
+   * @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.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
   /**

package/modern/DatePicker/DatePickerToolbar.js

@@ -26,10 +26,6 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })({});
-
-/**
- * @ignore - do not document.
- */
 const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -49,7 +45,7 @@ const DatePickerToolbarTitle = styled(Typography, {
  *
  * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
  */
-const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
+export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDatePickerToolbar'
@@ -133,5 +129,4 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
-} : void 0;
-export { DatePickerToolbar };
+} : void 0;

package/modern/DigitalClock/DigitalClock.js

@@ -327,8 +327,9 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @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.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
@@ -416,6 +417,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours']),
   /**
    * Available views.
+   * @default ['hours']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours']))
 } : void 0;

package/modern/LocalizationProvider/LocalizationProvider.js

@@ -61,7 +61,7 @@ export const LocalizationProvider = function LocalizationProvider(inProps) {
       instance: dateLibInstance
     });
     if (!adapter.isMUIAdapter) {
-      throw new Error(['MUI: 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/getting-started/#installation'].join(`\n`));
     }
     return adapter;
   }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -122,7 +122,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = useViews({
     view: inView,
@@ -134,7 +134,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     onFocusedViewChange
   });
   const handleMeridiemValueChange = useEventCallback(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -215,11 +215,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const handleSectionChange = useEventCallback((sectionView, newValue) => {
-    const viewIndex = views.indexOf(sectionView);
-    const nextView = views[viewIndex + 1];
-    setValueAndGoToView(newValue, nextView, sectionView);
-  });
   const buildViewProps = React.useCallback(viewToBuild => {
     switch (viewToBuild) {
       case 'hours':
@@ -227,7 +222,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
           return {
             onChange: hours => {
               const valueWithMeridiem = convertValueToMeridiem(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: getHourSectionOptions({
               now,
@@ -245,7 +240,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -262,7 +257,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -299,7 +294,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return _extends({}, result, {
@@ -397,8 +392,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @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.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
@@ -490,6 +486,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -47,7 +47,7 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '&:not(:first-of-type)': {
     borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  '&:after': {
+  '&::after': {
     display: 'block',
     content: '""',
     // subtracting the height of one item, extra margin and borders to make sure the max height is correct
@@ -116,17 +116,13 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
+    }
     if (!activeItem || previousActive.current === activeItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousActive.current !== activeItem) {
-        previousActive.current = activeItem;
-      }
       return;
     }
     previousActive.current = activeItem;
-    if (active && autoFocus) {
-      activeItem.focus();
-    }
     const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item

package/modern/PickersSectionList/PickersSectionList.js

@@ -117,7 +117,7 @@ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSection
   const handleRootRef = useForkRef(ref, rootRef);
   const getRoot = methodName => {
     if (!rootRef.current) {
-      throw new Error(`MUI: Cannot call sectionListRef.${methodName} before the mount of the component`);
+      throw new Error(`MUI X: Cannot call sectionListRef.${methodName} before the mount of the component.`);
     }
     return rootRef.current;
   };

package/modern/TimeClock/TimeClock.js

@@ -383,8 +383,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @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.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
@@ -462,6 +463,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/modern/hooks/useClearableField.js

@@ -41,8 +41,8 @@ export const useClearableField = props => {
   });
   return _extends({}, other, {
     InputProps: _extends({}, InputProps, {
-      endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(InputAdornment, {
+      endAdornment: /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [clearable && /*#__PURE__*/_jsx(InputAdornment, {
           position: "end",
           sx: {
             marginRight: InputProps?.endAdornment ? -1 : -1.5
@@ -54,7 +54,7 @@ export const useClearableField = props => {
             }, endClearIconProps))
           }))
         }), InputProps?.endAdornment]
-      }) : InputProps?.endAdornment
+      })
     }),
     sx: [{
       '& .clearButton': {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.6
+ * @mui/x-date-pickers v7.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersInput/PickersFilledInput.js

@@ -43,7 +43,7 @@ const FilledInputRoot = styled(PickersInputRoot, {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
     }
   }, !ownerState.disableUnderline && {
-    '&:after': {
+    '&::after': {
       borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
@@ -68,7 +68,7 @@ const FilledInputRoot = styled(PickersInputRoot, {
         borderBottomColor: (theme.vars || theme).palette.error.main
       }
     },
-    '&:before': {
+    '&::before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,
       bottom: 0,

package/modern/internals/components/PickersInput/PickersInput.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "inputProps", "inputRef", "sectionListRef"];
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useFormControl } from '@mui/material/FormControl';
 import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
@@ -14,7 +13,7 @@ import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSect
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const round = value => Math.round(value * 1e5) / 1e5;
-export const PickersInputRoot = styled(Box, {
+export const PickersInputRoot = styled('div', {
   name: 'MuiPickersInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -160,7 +159,7 @@ export const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(
   const handleInputRef = useForkRef(inputProps?.ref, inputRef);
   const muiFormControl = useFormControl();
   if (!muiFormControl) {
-    throw new Error('MUI: PickersInput should always be used inside a PickersTextField component');
+    throw new Error('MUI X: PickersInput should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
     // Fix a bug with IE11 where the focus/blur events are triggered

package/modern/internals/components/PickersInput/PickersStandardInput.js

@@ -26,7 +26,7 @@ const StandardInputRoot = styled(PickersInputRoot, {
       marginTop: 16
     }
   }, !ownerState.disableUnderline && {
-    '&:after': {
+    '&::after': {
       background: 'red',
       borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
       left: 0,
@@ -52,7 +52,7 @@ const StandardInputRoot = styled(PickersInputRoot, {
         borderBottomColor: (theme.vars || theme).palette.error.main
       }
     },
-    '&:before': {
+    '&::before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
       bottom: 0,

package/modern/internals/hooks/useField/useField.utils.js

@@ -3,7 +3,7 @@ import { getMonthsInYear } from '../../utils/date-utils';
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
   if (config == null) {
-    throw new Error([`MUI: The token "${formatToken}" is not supported by the Date and Time Pickers.`, 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
+    throw new Error([`MUI X: The token "${formatToken}" is not supported by the Date and Time Pickers.`, 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
   }
   if (typeof config === 'string') {
     return {
@@ -80,7 +80,7 @@ export const cleanLeadingZeros = (utils, valueStr, size) => {
 export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries, section) => {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
-      throw new Error([`MUI: The token "${section.format}" is a digit format with letter in it.'
+      throw new Error([`MUI X: The token "${section.format}" is a digit format with letter in it.'
              This type of format is only supported for 'day' sections`].join('\n'));
     }
   }
@@ -356,7 +356,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
         maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
       } else {
         if (sectionConfig.maxLength == null) {
-          throw new Error(`MUI: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
+          throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
         }
         maxLength = sectionConfig.maxLength;
         if (isValidDate) {
@@ -387,7 +387,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
     nextFormat = utils.expandFormat(prevFormat);
     formatExpansionOverflow -= 1;
     if (formatExpansionOverflow < 0) {
-      throw new Error('MUI: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component');
+      throw new Error('MUI X: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component.');
     }
   }
   const expandedFormat = nextFormat;
@@ -601,7 +601,7 @@ export const validateSections = (sections, valueType) => {
       }
       const invalidSection = sections.find(section => !supportedSections.includes(section.type));
       if (invalidSection) {
-        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
+        console.warn(`MUI X: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
         warnedOnceInvalidSection = true;
       }
     }