@mui/x-date-pickers 8.0.0-alpha.6 → 8.0.0-alpha.7

package/modern/{AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js → AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.js}

@@ -1,53 +1,50 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
-// TODO remove when date-fns-jalali-v3 is the default
 // @ts-nocheck
-import { addSeconds } from 'date-fns-jalali/addSeconds';
-import { addMinutes } from 'date-fns-jalali/addMinutes';
-import { addHours } from 'date-fns-jalali/addHours';
-import { addDays } from 'date-fns-jalali/addDays';
-import { addWeeks } from 'date-fns-jalali/addWeeks';
-import { addMonths } from 'date-fns-jalali/addMonths';
-import { addYears } from 'date-fns-jalali/addYears';
-import { endOfDay } from 'date-fns-jalali/endOfDay';
-import { endOfWeek } from 'date-fns-jalali/endOfWeek';
-import { endOfYear } from 'date-fns-jalali/endOfYear';
-import { format as dateFnsFormat, longFormatters } from 'date-fns-jalali/format';
-import { getHours } from 'date-fns-jalali/getHours';
-import { getSeconds } from 'date-fns-jalali/getSeconds';
-import { getMilliseconds } from 'date-fns-jalali/getMilliseconds';
-import { getWeek } from 'date-fns-jalali/getWeek';
-import { getYear } from 'date-fns-jalali/getYear';
-import { getMonth } from 'date-fns-jalali/getMonth';
-import { getDate } from 'date-fns-jalali/getDate';
-import { getDaysInMonth } from 'date-fns-jalali/getDaysInMonth';
-import { getMinutes } from 'date-fns-jalali/getMinutes';
-import { isAfter } from 'date-fns-jalali/isAfter';
-import { isBefore } from 'date-fns-jalali/isBefore';
-import { isEqual } from 'date-fns-jalali/isEqual';
-import { isSameDay } from 'date-fns-jalali/isSameDay';
-import { isSameYear } from 'date-fns-jalali/isSameYear';
-import { isSameMonth } from 'date-fns-jalali/isSameMonth';
-import { isSameHour } from 'date-fns-jalali/isSameHour';
-import { isValid } from 'date-fns-jalali/isValid';
-import { parse as dateFnsParse } from 'date-fns-jalali/parse';
-import { setDate } from 'date-fns-jalali/setDate';
-import { setHours } from 'date-fns-jalali/setHours';
-import { setMinutes } from 'date-fns-jalali/setMinutes';
-import { setMonth } from 'date-fns-jalali/setMonth';
-import { setSeconds } from 'date-fns-jalali/setSeconds';
-import { setMilliseconds } from 'date-fns-jalali/setMilliseconds';
-import { setYear } from 'date-fns-jalali/setYear';
-import { startOfDay } from 'date-fns-jalali/startOfDay';
-import { startOfMonth } from 'date-fns-jalali/startOfMonth';
-import { endOfMonth } from 'date-fns-jalali/endOfMonth';
-import { startOfWeek } from 'date-fns-jalali/startOfWeek';
-import { startOfYear } from 'date-fns-jalali/startOfYear';
-import { isWithinInterval } from 'date-fns-jalali/isWithinInterval';
-import { faIR as defaultLocale } from 'date-fns-jalali/locale/fa-IR';
-// date-fns-jalali v2 does not export types
-// @ts-ignore TODO remove when date-fns-jalali-v3 is the default
-
+import addSeconds from 'date-fns-jalali/addSeconds';
+import addMinutes from 'date-fns-jalali/addMinutes';
+import addHours from 'date-fns-jalali/addHours';
+import addDays from 'date-fns-jalali/addDays';
+import addWeeks from 'date-fns-jalali/addWeeks';
+import addMonths from 'date-fns-jalali/addMonths';
+import addYears from 'date-fns-jalali/addYears';
+import endOfDay from 'date-fns-jalali/endOfDay';
+import endOfWeek from 'date-fns-jalali/endOfWeek';
+import endOfYear from 'date-fns-jalali/endOfYear';
+import dateFnsFormat from 'date-fns-jalali/format';
+import getHours from 'date-fns-jalali/getHours';
+import getSeconds from 'date-fns-jalali/getSeconds';
+import getMilliseconds from 'date-fns-jalali/getMilliseconds';
+import getWeek from 'date-fns-jalali/getWeek';
+import getYear from 'date-fns-jalali/getYear';
+import getMonth from 'date-fns-jalali/getMonth';
+import getDate from 'date-fns-jalali/getDate';
+import getDaysInMonth from 'date-fns-jalali/getDaysInMonth';
+import getMinutes from 'date-fns-jalali/getMinutes';
+import isAfter from 'date-fns-jalali/isAfter';
+import isBefore from 'date-fns-jalali/isBefore';
+import isEqual from 'date-fns-jalali/isEqual';
+import isSameDay from 'date-fns-jalali/isSameDay';
+import isSameYear from 'date-fns-jalali/isSameYear';
+import isSameMonth from 'date-fns-jalali/isSameMonth';
+import isSameHour from 'date-fns-jalali/isSameHour';
+import isValid from 'date-fns-jalali/isValid';
+import dateFnsParse from 'date-fns-jalali/parse';
+import setDate from 'date-fns-jalali/setDate';
+import setHours from 'date-fns-jalali/setHours';
+import setMinutes from 'date-fns-jalali/setMinutes';
+import setMonth from 'date-fns-jalali/setMonth';
+import setSeconds from 'date-fns-jalali/setSeconds';
+import setMilliseconds from 'date-fns-jalali/setMilliseconds';
+import setYear from 'date-fns-jalali/setYear';
+import startOfDay from 'date-fns-jalali/startOfDay';
+import startOfMonth from 'date-fns-jalali/startOfMonth';
+import endOfMonth from 'date-fns-jalali/endOfMonth';
+import startOfWeek from 'date-fns-jalali/startOfWeek';
+import startOfYear from 'date-fns-jalali/startOfYear';
+import isWithinInterval from 'date-fns-jalali/isWithinInterval';
+import defaultLocale from 'date-fns-jalali/locale/fa-IR';
+import longFormatters from 'date-fns-jalali/_lib/format/longFormatters';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 const defaultFormats = {
   year: 'yyyy',
@@ -119,10 +116,7 @@ export class AdapterDateFnsJalali extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error([`MUI: The \`date-fns-jalali\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
-      }
-      if (!longFormatters) {
-        throw new Error('MUI: The minimum supported `date-fns-jalali` package version compatible with this adapter is `3.2.x`.');
+        throw new Error(['MUI: This adapter is only compatible with `date-fns-jalali` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
       }
     }
     super({
@@ -133,7 +127,6 @@ export class AdapterDateFnsJalali extends AdapterDateFnsBase {
       longFormatters,
       lib: 'date-fns-jalali'
     });
-    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/modern/AdapterDateFnsJalaliV2/index.js

@@ -0,0 +1 @@
+export { AdapterDateFnsJalali } from "./AdapterDateFnsJalaliV2.js";

package/modern/{AdapterDateFnsV3/AdapterDateFnsV3.js → AdapterDateFnsV2/AdapterDateFnsV2.js}

@@ -1,53 +1,49 @@
 /* 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 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';
+import dateFnsFormat 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 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 defaultLocale from 'date-fns/locale/en-US';
+import longFormatters from 'date-fns/_lib/format/longFormatters';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 /**
  * Based on `@date-io/date-fns`
@@ -82,18 +78,14 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x or v4.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`.');
+        throw new Error(['MUI: This adapter is only compatible with `date-fns` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
       }
     }
     super({
-      locale: locale ?? enUS,
+      locale: locale ?? defaultLocale,
       formats,
       longFormatters
     });
-    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/modern/AdapterDateFnsV2/index.js

@@ -0,0 +1 @@
+export { AdapterDateFns } from "./AdapterDateFnsV2.js";

package/modern/DateCalendar/DateCalendar.js

@@ -260,7 +260,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
-    if (value != null && utils.isValid(value)) {
+    if (utils.isValid(value)) {
       changeMonth(value);
     }
   }, [value]); // eslint-disable-line

package/modern/DateField/useDateField.js

@@ -1,22 +1,24 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateDate } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedDateField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useDateField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+import { useDateManager } from "../managers/index.js";
+export const useDateField = props => {
+  const manager = useDateManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateDate,
-    valueType: 'date'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/modern/DatePicker/DatePicker.js

@@ -59,7 +59,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
+   * If `true`, the Picker will close after submitting the full date.
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,

package/modern/DatePicker/DatePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "className", "classes"];
+const _excluded = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -59,8 +59,6 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     name: 'MuiDatePickerToolbar'
   });
   const {
-      value,
-      isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
       className,
@@ -69,13 +67,15 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const {
-    views
+    value,
+    views,
+    orientation
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
-    if (!value) {
+    if (!utils.isValid(value)) {
       return toolbarPlaceholder;
     }
     const formatFromViews = resolveDateFormat(utils, {
@@ -87,12 +87,11 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
   return /*#__PURE__*/_jsx(DatePickerToolbarRoot, _extends({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,
-    isLandscape: isLandscape,
     className: clsx(classes.root, className)
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
-      align: isLandscape ? 'left' : 'center',
+      align: orientation === 'landscape' ? 'left' : 'center',
       ownerState: ownerState,
       className: classes.title,
       children: dateText
@@ -114,8 +113,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -129,6 +126,5 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.object
+  toolbarPlaceholder: PropTypes.node
 } : void 0;

package/modern/DateTimeField/useDateTimeField.js

@@ -1,22 +1,24 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateDateTime } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedDateTimeField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useDateTimeField = inProps => {
-  const props = useDefaultizedDateTimeField(inProps);
+import { useDateTimeManager } from "../managers/index.js";
+export const useDateTimeField = props => {
+  const manager = useDateTimeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date-time');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateDateTime,
-    valueType: 'date-time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/modern/DateTimePicker/DateTimePicker.js

@@ -69,8 +69,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -78,11 +78,11 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
   } = usePickerPrivateContext();
   const {
     view,
-    onViewChange
+    setView
   } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
-    onViewChange(tabToView(value));
+    setView(tabToView(value));
   };
   if (hidden) {
     return null;

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "isLandscape", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "className", "classes"];
+const _excluded = ["ampm", "ampmInClock", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "className", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -230,9 +230,6 @@ function DateTimePickerToolbar(inProps) {
   const {
       ampm,
       ampmInClock,
-      value,
-      onChange,
-      isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
       toolbarTitle: inToolbarTitle,
@@ -241,31 +238,37 @@ function DateTimePickerToolbar(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    value: valueContext,
+    setValue: setValueContext,
     disabled,
     readOnly,
     variant,
-    view: viewCtx,
-    onViewChange: onViewChangeCtx,
+    orientation,
+    view: viewContext,
+    setView: setViewContext,
     views
   } = usePickerContext();
+  const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp, ownerState);
   const utils = useUtils();
+  const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
+  const value = overrides ? overrides.value : valueContext;
+  const setValue = overrides ? overrides.setValue : setValueContext;
+  const view = overrides ? overrides.view : viewContext;
+  const setView = overrides ? overrides.setView : setViewContext;
   const {
     meridiemMode,
     handleMeridiemChange
-  } = useMeridiemMode(value, ampm, onChange);
-  const translations = usePickerTranslations();
-  const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
+  } = useMeridiemMode(value, ampm, newValue => setValue(newValue, {
+    changeImportance: 'set'
+  }));
   const toolbarVariant = overrides?.forceDesktopVariant ? 'desktop' : variant;
   const isDesktop = toolbarVariant === 'desktop';
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
-  const view = overrides ? overrides.view : viewCtx;
-  const onViewChange = overrides ? overrides.onViewChange : onViewChangeCtx;
-  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
-    if (!value) {
+    if (!utils.isValid(value)) {
       return toolbarPlaceholder;
     }
     if (toolbarFormat) {
@@ -273,8 +276,13 @@ function DateTimePickerToolbar(inProps) {
     }
     return utils.format(value, 'shortDate');
   }, [value, toolbarFormat, toolbarPlaceholder, utils]);
+  const formatSection = (format, fallback) => {
+    if (!utils.isValid(value)) {
+      return fallback;
+    }
+    return utils.format(value, format);
+  };
   return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
-    isLandscape: isLandscape,
     className: clsx(classes.root, className),
     toolbarTitle: toolbarTitle,
     toolbarVariant: toolbarVariant
@@ -286,13 +294,13 @@ function DateTimePickerToolbar(inProps) {
       children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         tabIndex: -1,
         variant: "subtitle1",
-        onClick: () => onViewChange('year'),
+        onClick: () => setView('year'),
         selected: view === 'year',
-        value: value ? utils.format(value, 'year') : '–'
+        value: formatSection('year', '–')
       }), views.includes('day') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         tabIndex: -1,
         variant: isDesktop ? 'h5' : 'h4',
-        onClick: () => onViewChange('day'),
+        onClick: () => setView('day'),
         selected: view === 'day',
         value: dateText
       })]
@@ -307,10 +315,10 @@ function DateTimePickerToolbar(inProps) {
         children: [views.includes('hours') && /*#__PURE__*/_jsxs(React.Fragment, {
           children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
-            width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
-            onClick: () => onViewChange('hours'),
+            width: isDesktop && orientation === 'portrait' ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
+            onClick: () => setView('hours'),
             selected: view === 'hours',
-            value: value ? formatHours(value) : '--'
+            value: formatSection(ampm ? 'hours12h' : 'hours24h', '--')
           }), /*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
@@ -319,10 +327,10 @@ function DateTimePickerToolbar(inProps) {
             toolbarVariant: toolbarVariant
           }), /*#__PURE__*/_jsx(PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
-            width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
-            onClick: () => onViewChange('minutes'),
+            width: isDesktop && orientation === 'portrait' ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
+            onClick: () => setView('minutes'),
             selected: view === 'minutes' || !views.includes('minutes') && view === 'hours',
-            value: value ? utils.format(value, 'minutes') : '--',
+            value: formatSection('minutes', '--'),
             disabled: !views.includes('minutes')
           })]
         }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
@@ -334,10 +342,10 @@ function DateTimePickerToolbar(inProps) {
             toolbarVariant: toolbarVariant
           }), /*#__PURE__*/_jsx(PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
-            width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
-            onClick: () => onViewChange('seconds'),
+            width: isDesktop && orientation === 'portrait' ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
+            onClick: () => setView('seconds'),
             selected: view === 'seconds',
-            value: value ? utils.format(value, 'seconds') : '--'
+            value: formatSection('seconds', '--')
           })]
         })]
       }), showAmPmControl && !isDesktop && /*#__PURE__*/_jsxs(DateTimePickerToolbarAmPmSelection, {
@@ -360,7 +368,7 @@ function DateTimePickerToolbar(inProps) {
         })]
       }), ampm && isDesktop && /*#__PURE__*/_jsx(PickersToolbarButton, {
         variant: "h5",
-        onClick: () => onViewChange('meridiem'),
+        onClick: () => setView('meridiem'),
         selected: view === 'meridiem',
         value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
@@ -385,8 +393,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -404,7 +410,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
   /**
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */
-  toolbarTitle: PropTypes.node,
-  value: PropTypes.object
+  toolbarTitle: PropTypes.node
 } : void 0;
 export { DateTimePickerToolbar };

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -16,6 +16,8 @@ import { DateField } from "../DateField/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
 import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
+const emptyActions = [];
+
 /**
  * Demos:
  *
@@ -40,6 +42,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
+    closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
     format: resolveDateFormat(utils, defaultizedProps, false),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
@@ -53,7 +56,10 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
       }),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar)
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: ownerState => _extends({
+        actions: emptyActions
+      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
     })
   });
   const {
@@ -86,8 +92,8 @@ DesktopDatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
    */
   closeOnSelect: PropTypes.bool,
   /**