@mui/x-date-pickers 6.5.0 → 6.7.0

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -18,8 +18,9 @@ var _PickersToolbarButton = require("../internals/components/PickersToolbarButto
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
+var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -44,10 +45,13 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
-  theme
+  theme,
+  ownerState
 }) => ({
-  paddingLeft: 16,
-  paddingRight: 16,
+  paddingLeft: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 24 : 16,
+  paddingRight: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 0 : 16,
+  borderBottom: ownerState.toolbarVariant === 'desktop' ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
+  borderRight: ownerState.toolbarVariant === 'desktop' && ownerState.isLandscape ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
   justifyContent: 'space-around',
   position: 'relative',
   [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: (0, _extends2.default)({
@@ -93,11 +97,15 @@ const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
   theme,
   ownerState
 }) => {
-  const direction = ownerState.isLandscape ? 'column' : 'row';
+  const direction = ownerState.isLandscape && ownerState.toolbarVariant !== 'desktop' ? 'column' : 'row';
   return (0, _extends2.default)({
     display: 'flex',
     flexDirection: direction
-  }, theme.direction === 'rtl' && {
+  }, ownerState.toolbarVariant === 'desktop' && (0, _extends2.default)({}, !ownerState.isLandscape && {
+    gap: 9,
+    marginRight: 4,
+    alignSelf: 'flex-end'
+  }), theme.direction === 'rtl' && {
     flexDirection: `${direction}-reverse`
   });
 });
@@ -106,9 +114,12 @@ const DateTimePickerToolbarTimeDigitsContainer = (0, _styles.styled)('div', {
   slot: 'TimeDigitsContainer',
   overridesResolver: (props, styles) => styles.timeDigitsContainer
 })(({
-  theme
+  theme,
+  ownerState
 }) => (0, _extends2.default)({
   display: 'flex'
+}, ownerState.toolbarVariant === 'desktop' && {
+  gap: 1.5
 }, theme.direction === 'rtl' && {
   flexDirection: 'row-reverse'
 }));
@@ -125,10 +136,12 @@ const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.P
   name: 'MuiDateTimePickerToolbar',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({
-  margin: '0 4px 0 2px',
+})(({
+  ownerState
+}) => ({
+  margin: ownerState.toolbarVariant === 'desktop' ? 0 : '0 4px 0 2px',
   cursor: 'default'
-});
+}));
 
 // Taken from TimePickerToolbar
 const DateTimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
@@ -173,7 +186,8 @@ function DateTimePickerToolbar(inProps) {
       toolbarPlaceholder = '––',
       views,
       disabled,
-      readOnly
+      readOnly,
+      toolbarVariant = 'mobile'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
@@ -183,6 +197,7 @@ function DateTimePickerToolbar(inProps) {
     handleMeridiemChange
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
   const showAmPmControl = Boolean(ampm && !ampmInClock);
+  const isDesktop = toolbarVariant === 'desktop';
   const localeText = (0, _useUtils.useLocaleText)();
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, ownerState, {
@@ -215,7 +230,7 @@ function DateTimePickerToolbar(inProps) {
         value: value ? utils.format(value, 'year') : '–'
       }), views.includes('day') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
         tabIndex: -1,
-        variant: "h4",
+        variant: isDesktop ? 'h5' : 'h4',
         onClick: () => onViewChange('day'),
         selected: view === 'day',
         value: dateText
@@ -225,41 +240,44 @@ function DateTimePickerToolbar(inProps) {
       ownerState: ownerState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeDigitsContainer, {
         className: classes.timeDigitsContainer,
+        ownerState: ownerState,
         children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-          variant: "h3",
+          variant: isDesktop ? 'h5' : 'h3',
+          width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
           onClick: () => onViewChange('hours'),
           selected: view === 'hours',
           value: value ? formatHours(value) : '--'
         }), views.includes('minutes') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
-            variant: "h3",
+            variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
             ownerState: ownerState
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-            variant: "h3",
+            variant: isDesktop ? 'h5' : 'h3',
+            width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
             onClick: () => onViewChange('minutes'),
             selected: view === 'minutes',
             value: value ? utils.format(value, 'minutes') : '--'
           })]
         }), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
-            variant: "h3",
+            variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
             ownerState: ownerState
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-            variant: "h3",
+            variant: isDesktop ? 'h5' : 'h3',
+            width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
             onClick: () => onViewChange('seconds'),
             selected: view === 'seconds',
             value: value ? utils.format(value, 'seconds') : '--'
           })]
         })]
-      }), showAmPmControl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarAmPmSelection, {
+      }), showAmPmControl && !isDesktop && /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarAmPmSelection, {
         className: classes.ampmSelection,
         ownerState: ownerState,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-          disableRipple: true,
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
@@ -267,7 +285,6 @@ function DateTimePickerToolbar(inProps) {
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-          disableRipple: true,
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
@@ -275,6 +292,12 @@ function DateTimePickerToolbar(inProps) {
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
+      }), ampm && isDesktop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+        variant: "h5",
+        onClick: () => onViewChange('meridiem'),
+        selected: view === 'meridiem',
+        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        width: _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]
   }));
@@ -319,10 +342,11 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
+  toolbarVariant: _propTypes.default.oneOf(['desktop', 'mobile']),
   value: _propTypes.default.any,
   /**
    * Currently visible picker view.
    */
-  view: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired,
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -13,10 +13,11 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../DatePicker/shared");
 var _internals = require("../internals");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
-var _icons = require("../internals/components/icons");
+var _icons = require("../icons");
 var _DateField = require("../DateField");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _dateViewRenderers = require("../dateViewRenderers");
+var _dateUtils = require("../internals/utils/date-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
@@ -34,10 +35,10 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _shared.getDatePickerFieldFormat)(utils, defaultizedProps),
+    format: (0, _dateUtils.resolveDateFormat)(utils, defaultizedProps, false),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     slots: (0, _extends2.default)({
-      openPickerIcon: _icons.Calendar,
+      openPickerIcon: _icons.CalendarIcon,
       field: _DateField.DateField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -12,36 +12,62 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
-var _dateViewRenderers = require("../dateViewRenderers");
-var _internals = require("../internals");
-var _icons = require("../internals/components/icons");
+var _dateViewRenderers = require("../dateViewRenderers/dateViewRenderers");
+var _dateTimeViewRenderers = require("../dateTimeViewRenderers");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateDateTime = require("../internals/utils/validation/validateDateTime");
+var _icons = require("../icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
+var _dateTimeUtils = require("../internals/utils/date-time-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateTimePickerDefaultizedProps)(inProps, 'MuiDesktopDateTimePicker');
-  const viewRenderers = (0, _extends2.default)({
+  const timeSteps = (0, _extends2.default)({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, defaultizedProps.timeSteps);
+  const shouldUseNewRenderer = !defaultizedProps.viewRenderers || Object.keys(defaultizedProps.viewRenderers).length === 0;
+  const viewRenderers =
+  // we can only ensure the expected two-column layout if none of the renderers are overridden
+  shouldUseNewRenderer ? {
+    day: _dateTimeViewRenderers.renderDesktopDateTimeView,
+    month: _dateTimeViewRenderers.renderDesktopDateTimeView,
+    year: _dateTimeViewRenderers.renderDesktopDateTimeView,
+    hours: _dateTimeViewRenderers.renderDesktopDateTimeView,
+    minutes: _dateTimeViewRenderers.renderDesktopDateTimeView,
+    seconds: _dateTimeViewRenderers.renderDesktopDateTimeView,
+    meridiem: _dateTimeViewRenderers.renderDesktopDateTimeView
+  } : (0, _extends2.default)({
     day: _dateViewRenderers.renderDateViewCalendar,
     month: _dateViewRenderers.renderDateViewCalendar,
     year: _dateViewRenderers.renderDateViewCalendar,
     hours: null,
     minutes: null,
-    seconds: null
+    seconds: null,
+    meridiem: null
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
+  // add "accept" action only when the new date time view renderers are used
+  const actionBarActions = shouldUseNewRenderer ? ['accept'] : [];
 
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
+    format: (0, _dateTimeUtils.resolveDateTimeFormat)(utils, defaultizedProps),
+    views: defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
+    timeSteps,
     slots: (0, _extends2.default)({
       field: _DateTimeField.DateTimeField,
-      openPickerIcon: _icons.Calendar
+      openPickerIcon: _icons.CalendarIcon
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
       field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
@@ -49,11 +75,15 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       }),
       toolbar: (0, _extends2.default)({
         hidden: true,
-        ampmInClock
+        ampmInClock,
+        toolbarVariant: shouldUseNewRenderer ? 'desktop' : 'mobile'
       }, defaultizedProps.slotProps?.toolbar),
       tabs: (0, _extends2.default)({
         hidden: true
-      }, defaultizedProps.slotProps?.tabs)
+      }, defaultizedProps.slotProps?.tabs),
+      actionBar: (0, _extends2.default)({
+        actions: actionBarActions
+      }, defaultizedProps.slotProps?.actionBar)
     })
   });
   const {
@@ -63,7 +93,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
-    validator: _internals.validateDateTime
+    validator: _validateDateTime.validateDateTime
   });
   return renderPicker();
 });
@@ -302,7 +332,7 @@ DesktopDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -380,6 +410,11 @@ DesktopDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: _propTypes.default.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -394,6 +429,17 @@ DesktopDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: _propTypes.default.shape({
+    hours: _propTypes.default.number,
+    minutes: _propTypes.default.number,
+    seconds: _propTypes.default.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -404,7 +450,7 @@ DesktopDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -413,6 +459,7 @@ DesktopDateTimePicker.propTypes = {
   viewRenderers: _propTypes.default.shape({
     day: _propTypes.default.func,
     hours: _propTypes.default.func,
+    meridiem: _propTypes.default.func,
     minutes: _propTypes.default.func,
     month: _propTypes.default.func,
     seconds: _propTypes.default.func,

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -12,15 +12,18 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _internals = require("../internals");
-var _icons = require("../internals/components/icons");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateTime = require("../internals/utils/validation/validateTime");
+var _icons = require("../icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _timeViewRenderers = require("../timeViewRenderers");
+var _timeUtils = require("../internals/utils/time-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = (0, _shared.useTimePickerDefaultizedProps)(inProps, 'MuiDesktopTimePicker');
@@ -49,12 +52,13 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     ampmInClock,
     timeSteps,
     viewRenderers,
+    format: (0, _timeUtils.resolveTimeFormat)(utils, defaultizedProps),
     // Setting only `hours` time view in case of single column time picker
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: (0, _extends2.default)({
       field: _TimeField.TimeField,
-      openPickerIcon: _icons.Clock
+      openPickerIcon: _icons.ClockIcon
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
       field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
@@ -76,7 +80,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
-    validator: _internals.validateTime
+    validator: _validateTime.validateTime
   });
   return renderPicker();
 });

package/node/LocalizationProvider/LocalizationProvider.js

@@ -122,6 +122,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
     keyboardDateTime: _propTypes.default.string,
     keyboardDateTime12h: _propTypes.default.string,
     keyboardDateTime24h: _propTypes.default.string,
+    meridiem: _propTypes.default.string,
     minutes: _propTypes.default.string,
     month: _propTypes.default.string,
     monthAndDate: _propTypes.default.string,

package/node/MobileDatePicker/MobileDatePicker.js

@@ -16,6 +16,7 @@ var _DateField = require("../DateField");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateViewRenderers = require("../dateViewRenderers");
+var _dateUtils = require("../internals/utils/date-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
@@ -33,7 +34,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
   // Props with the default values specific to the mobile variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _shared.getDatePickerFieldFormat)(utils, defaultizedProps),
+    format: (0, _dateUtils.resolveDateFormat)(utils, defaultizedProps, false),
     slots: (0, _extends2.default)({
       field: _DateField.DateField
     }, defaultizedProps.slots),

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -12,15 +12,18 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
-var _internals = require("../internals");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateDateTime = require("../internals/utils/validation/validateDateTime");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _timeViewRenderers = require("../timeViewRenderers");
+var _dateTimeUtils = require("../internals/utils/date-time-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateTimePickerDefaultizedProps)(inProps, 'MuiMobileDateTimePicker');
@@ -37,6 +40,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   // Props with the default values specific to the mobile variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
+    format: (0, _dateTimeUtils.resolveDateTimeFormat)(utils, defaultizedProps),
     ampmInClock,
     slots: (0, _extends2.default)({
       field: _DateTimeField.DateTimeField
@@ -61,7 +65,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
-    validator: _internals.validateDateTime
+    validator: _validateDateTime.validateDateTime
   });
   return renderPicker();
 });

package/node/MobileTimePicker/MobileTimePicker.js

@@ -12,14 +12,17 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _internals = require("../internals");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateTime = require("../internals/utils/validation/validateTime");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _timeViewRenderers = require("../timeViewRenderers");
+var _timeUtils = require("../internals/utils/time-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = (0, _shared.useTimePickerDefaultizedProps)(inProps, 'MuiMobileTimePicker');
@@ -34,6 +37,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   const props = (0, _extends2.default)({}, defaultizedProps, {
     ampmInClock,
     viewRenderers,
+    format: (0, _timeUtils.resolveTimeFormat)(utils, defaultizedProps),
     slots: (0, _extends2.default)({
       field: _TimeField.TimeField
     }, defaultizedProps.slots),
@@ -54,7 +58,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
-    validator: _internals.validateTime
+    validator: _validateTime.validateTime
   });
   return renderPicker();
 });

package/node/MonthCalendar/MonthCalendar.js

@@ -114,7 +114,7 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = (0, _utils.unstable_useEventCallback)(month => {
+  const isMonthDisabled = React.useCallback(month => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     if (utils.isBefore(month, firstEnabledMonth)) {
@@ -127,7 +127,7 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
       return false;
     }
     return shouldDisableMonth(month);
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   const handleMonthSelection = (0, _utils.unstable_useEventCallback)((event, month) => {
     if (readOnly) {
       return;

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -52,7 +52,8 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   '&:after': {
     display: 'block',
     content: '""',
-    height: 188
+    // subtracting the height of one item, extra margin and borders to make sure the max height is correct
+    height: 'calc(100% - 40px - 6px)'
   }
 }));
 const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.default, {
@@ -64,7 +65,7 @@ const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.defaul
 }) => ({
   padding: 8,
   margin: '2px 4px',
-  width: 48,
+  width: _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH,
   justifyContent: 'center',
   '&:first-of-type': {
     marginTop: 4

package/node/TimeField/TimeField.js

@@ -255,6 +255,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default false
    */
   readOnly: _propTypes.default.bool,
+  /**
+   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/node/YearCalendar/YearCalendar.js

@@ -116,7 +116,7 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isYearDisabled = (0, _utils.unstable_useEventCallback)(dateToValidate => {
+  const isYearDisabled = React.useCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
     }
@@ -133,7 +133,7 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
       return true;
     }
     return false;
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   const handleYearSelection = (0, _utils.unstable_useEventCallback)((event, year) => {
     if (readOnly) {
       return;