@mui/x-date-pickers 6.3.0 → 6.3.1

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.3.1
+
+_May 5, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.3.1` / `@mui/x-data-grid-pro@v6.3.1` / `@mui/x-data-grid-premium@v6.3.1`
+
+#### Changes
+
+- [DataGrid] Fix broken filtering in the value formatter demo (#8621) @cherniavskii
+- [DataGrid] Fix falsy filter values not showing in filter button tooltip (#8550) @ithrforu
+- [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii
+- [DataGrid] Remove unwarranted warning log (#8847) @romgrk
+- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
+- [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii
+
+### `@mui/x-date-pickers@v6.3.1` / `@mui/x-date-pickers-pro@v6.3.1`
+
+#### Changes
+
+- [pickers] Fix `minutesStep` validation prop behavior (#8794) @LukasTy
+- [pickers] Fix time picker `viewRenderers` overriding (#8830) @LukasTy
+- [pickers] Remove last additional character when using LTR (#8848) @alexfauquette
+
+### Docs
+
+- [docs] Fix controlled mode demo on Editing page (#8800) @yaredtsy
+- [docs] Fix scrolling demo not working with React 18 (#6489) @cherniavskii
+- [docs] Update demo to support agregation on popular feature cell (#8617) @BalaM314
+- [docs] Clarify what `<path>` is (#8764) @alexfauquette
+
+### Core
+
+- [core] Do not include playground pages in `yarn typescript` script (#8822) @cherniavskii
+- [core] Limit `typescript:ci` step memory limit (#8796) @LukasTy
+- [core] Upgrade monorepo (#8835) @cherniavskii
+- [test] Use `fake` clock on `MobileDateRangePicker` (#8861) @LukasTy
+- [charts] Clean some styling (#8778) @alexfauquette
+- [charts] Improve tooltip (#8792) @alexfauquette
+- [charts] Improvement and docs on axis (#8654) @alexfauquette
+- [charts] Defaultize attributes (#8788) @alexfauquette
+
 ## 6.3.0
 
 _Apr 28, 2023_
@@ -264,9 +310,9 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 
 - [fields] Add missing tokens to `AdapterDateFnsJalali` (#8402) @flaviendelangle
 - [fields] Clean the active date manager (#8370) @flaviendelangle
-- [fields] Cleanup `useFieldState`  (#8292) @flaviendelangle
+- [fields] Cleanup `useFieldState` (#8292) @flaviendelangle
 - [fields] Only add RTL characters when needed (#8325) @flaviendelangle
-- [pickers] Add support for single input fields in range pickers  (#7927) @flaviendelangle
+- [pickers] Add support for single input fields in range pickers (#7927) @flaviendelangle
 - [pickers] Allows non token characters in format (#8256) @alexfauquette
 - [pickers] Avoid root imports and move public models to the models folder (#8337) @flaviendelangle
 - [pickers] Update `view` when `views` or `openTo` changes (#8361) @LukasTy

package/DateField/DateField.js

@@ -205,6 +205,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/DateTimeField/DateTimeField.js

@@ -238,6 +238,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/DateTimeField/DateTimeField.types.d.ts

@@ -4,27 +4,19 @@ import TextField from '@mui/material/TextField';
 import { DateTimeValidationError, FieldSection } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
-import { BaseDateValidationProps, BaseTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
+import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
 import { FieldsTextFieldProps } from '../internals/models/fields';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface UseDateTimeFieldParams<TDate, TChildProps extends {}> {
     props: UseDateTimeFieldComponentProps<TDate, TChildProps>;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export interface UseDateTimeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<TDate | null, FieldSection, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps {
+export interface UseDateTimeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<TDate | null, FieldSection, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps, DateTimeValidationProps<TDate> {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
-    /**
-     * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
-     */
-    minDateTime?: TDate;
-    /**
-     * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
-     */
-    maxDateTime?: TDate;
 }
 export type UseDateTimeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateTimeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps | 'format'>;
 export type UseDateTimeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate>> & UseDateTimeFieldProps<TDate>;

package/DateTimePicker/shared.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DefaultizedProps } from '../internals/models/helpers';
-import { DateOrTimeView, DateTimeValidationError, TimeView } from '../models';
+import { DateOrTimeView, DateTimeValidationError } from '../models';
 import { DateCalendarSlotsComponent, DateCalendarSlotsComponentsProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 import { TimeClockSlotsComponent, TimeClockSlotsComponentsProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
 import { DateTimePickerTabsProps, ExportedDateTimePickerTabsProps } from './DateTimePickerTabs';
-import { BaseDateValidationProps, BaseTimeValidationProps } from '../internals/models/validation';
+import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { DateTimePickerToolbarProps, ExportedDateTimePickerToolbarProps } from './DateTimePickerToolbar';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
@@ -13,6 +13,7 @@ import { DateViewRendererProps } from '../dateViewRenderers';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
+import { TimeViewWithMeridiem } from '../internals/models';
 export interface BaseDateTimePickerSlotsComponent<TDate> extends DateCalendarSlotsComponent<TDate>, TimeClockSlotsComponent {
     /**
      * Tabs enabling toggling between date and time pickers.
@@ -35,20 +36,12 @@ export interface BaseDateTimePickerSlotsComponentsProps<TDate> extends DateCalen
      */
     toolbar?: ExportedDateTimePickerToolbarProps;
 }
-export interface BaseDateTimePickerProps<TDate> extends BasePickerInputProps<TDate | null, TDate, DateOrTimeView, DateTimeValidationError>, Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>, ExportedBaseClockProps<TDate> {
+export interface BaseDateTimePickerProps<TDate> extends BasePickerInputProps<TDate | null, TDate, DateOrTimeView, DateTimeValidationError>, Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>, ExportedBaseClockProps<TDate>, DateTimeValidationProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
      */
     ampmInClock?: boolean;
-    /**
-     * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
-     */
-    minDateTime?: TDate;
-    /**
-     * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
-     */
-    maxDateTime?: TDate;
     /**
      * Overridable components.
      * @default {}
@@ -76,7 +69,7 @@ export interface BaseDateTimePickerProps<TDate> extends BasePickerInputProps<TDa
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be the used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, DateOrTimeView, DateViewRendererProps<TDate, DateOrTimeView> & TimeViewRendererProps<TimeView, BaseClockProps<TDate, TimeView>>, {}>>;
+    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, DateOrTimeView, DateViewRendererProps<TDate, DateOrTimeView> & TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, {}>>;
 }
 type UseDateTimePickerDefaultizedProps<TDate, Props extends BaseDateTimePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps>>;
 export declare function useDateTimePickerDefaultizedProps<TDate, Props extends BaseDateTimePickerProps<TDate>>(props: Props, name: string): Omit<UseDateTimePickerDefaultizedProps<TDate, Props>, 'components' | 'componentsProps'>;

package/DesktopTimePicker/DesktopTimePicker.js

@@ -11,7 +11,7 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$thr, _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
+  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
 
   // Props with the default values common to all time pickers
@@ -32,7 +32,9 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   }, defaultizedProps.viewRenderers);
   const ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : true;
   const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
-  const views = defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = ((_viewRenderers$hours = viewRenderers.hours) == null ? void 0 : _viewRenderers$hours.name) === renderMultiSectionDigitalClockTimeView.name;
+  const views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {

package/TimeClock/TimeClock.types.d.ts

@@ -3,6 +3,7 @@ import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponents
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { TimeView } from '../models';
+import { TimeViewWithMeridiem } from '../internals/models';
 export interface ExportedTimeClockProps<TDate> extends ExportedBaseClockProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
@@ -14,7 +15,7 @@ export interface TimeClockSlotsComponent extends PickersArrowSwitcherSlotsCompon
 }
 export interface TimeClockSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps {
 }
-export interface TimeClockProps<TDate> extends ExportedTimeClockProps<TDate>, BaseClockProps<TDate, TimeView> {
+export interface TimeClockProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps<TDate>, BaseClockProps<TDate, TView> {
     /**
      * Override or extend the styles applied to the component.
      */

package/TimeField/TimeField.js

@@ -222,6 +222,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.3.0
+ * @mui/x-date-pickers v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/hooks/useField/useField.utils.d.ts

@@ -14,7 +14,7 @@ export declare const cleanString: (dirtyString: string) => string;
 export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], isRTL: boolean) => TSection[];
 export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate>, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
-export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean) => FieldSectionWithoutPosition[];
+export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.

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

@@ -312,7 +312,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros) => {
+export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -400,7 +400,7 @@ export const splitFormatIntoSections = (utils, localeText, format, date, formatD
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
-      if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {

package/internals/hooks/useField/useFieldState.js

@@ -31,7 +31,7 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
@@ -155,7 +155,7 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros);
+      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/internals/hooks/usePicker/usePickerViews.d.ts

@@ -13,8 +13,8 @@ export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMer
     onFocusedViewChange: (viewToFocus: TView, hasFocus: boolean) => void;
 };
 type PickerViewRenderer<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
-export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = {
-    [K in TView]: PickerViewRenderer<TValue, TView, TExternalProps, TAdditionalProps> | null;
+export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
+    [K in TView]: PickerViewRenderer<TValue, K, TExternalProps, TAdditionalProps> | null;
 };
 /**
  * Props used to handle the views that are common to all pickers.

package/internals/index.d.ts

@@ -41,7 +41,7 @@ export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, }
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { DefaultizedProps, MakeOptional } from './models/helpers';
 export type { WrapperVariant } from './models/common';
-export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, } from './models/validation';
+export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';

package/internals/models/props/clock.d.ts

@@ -48,7 +48,7 @@ export interface BaseClockProps<TDate, TView extends TimeViewWithMeridiem> exten
      */
     readOnly?: boolean;
 }
-export interface DesktopOnlyTimePickerProps<TDate> extends Omit<ExportedDigitalClockProps<TDate>, 'timeStep'>, Omit<ExportedMultiSectionDigitalClockProps<TDate>, 'timeStep'> {
+export interface DesktopOnlyTimePickerProps<TDate> extends Omit<ExportedDigitalClockProps<TDate>, 'timeStep'>, Omit<ExportedMultiSectionDigitalClockProps<TDate>, 'timeSteps'> {
     /**
      * Amount of time options below or at which the single column time renderer is used.
      * @default 24

package/internals/models/validation.d.ts

@@ -108,4 +108,17 @@ export interface YearValidationProps<TDate> {
      */
     shouldDisableYear?: (year: TDate) => boolean;
 }
+/**
+ * Props used to validate a date time value.
+ */
+export interface DateTimeValidationProps<TDate> {
+    /**
+     * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
+     */
+    minDateTime?: TDate;
+    /**
+     * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
+     */
+    maxDateTime?: TDate;
+}
 export {};

package/internals/utils/validation/extractValidationProps.d.ts

@@ -4,4 +4,4 @@
  */
 export declare const extractValidationProps: <Props extends {
     [key: string]: any;
-}>(props: Props) => Pick<Props, "disableFuture" | "disablePast" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDate" | "maxDate" | "minTime" | "maxTime" | "shouldDisableTime" | "shouldDisableClock" | "minDateTime" | "maxDateTime" | "minuteStep">;
+}>(props: Props) => Pick<Props, "disableFuture" | "disablePast" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDate" | "maxDate" | "minutesStep" | "minTime" | "maxTime" | "shouldDisableTime" | "shouldDisableClock" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime">;

package/internals/utils/validation/extractValidationProps.js

@@ -1,4 +1,4 @@
-const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minuteStep'];
+const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minutesStep'];
 /**
  * Extract the validation props for the props received by a component.
  * Limit the risk of forgetting some of them and reduce the bundle size.

package/legacy/DateField/DateField.js

@@ -199,6 +199,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/legacy/DateTimeField/DateTimeField.js

@@ -232,6 +232,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -12,7 +12,7 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$thr, _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
+  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
 
   // Props with the default values common to all time pickers
@@ -33,7 +33,9 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
   }, defaultizedProps.viewRenderers);
   var ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : true;
   var actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
-  var views = defaultizedProps.ampm ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  var shouldHoursRendererContainMeridiemView = ((_viewRenderers$hours = viewRenderers.hours) == null ? void 0 : _viewRenderers$hours.name) === renderMultiSectionDigitalClockTimeView.name;
+  var views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   var props = _extends({}, defaultizedProps, {

package/legacy/TimeField/TimeField.js

@@ -216,6 +216,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.3.0
+ * @mui/x-date-pickers v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -323,7 +323,7 @@ var getEscapedPartsFromFormat = function getEscapedPartsFromFormat(utils, format
   }
   return escapedParts;
 };
-export var splitFormatIntoSections = function splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros) {
+export var splitFormatIntoSections = function splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) {
   var startSeparator = '';
   var sections = [];
   var now = utils.date();
@@ -416,7 +416,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, loc
   return sections.map(function (section) {
     var cleanSeparator = function cleanSeparator(separator) {
       var cleanedSeparator = separator;
-      if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = "\u2069".concat(cleanedSeparator, "\u2066");
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {

package/legacy/internals/hooks/useField/useFieldState.js

@@ -37,7 +37,7 @@ export var useFieldState = function useFieldState(params) {
   var getSectionsFromValue = React.useCallback(function (value) {
     var fallbackSections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, function (date) {
-      return splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros);
+      return splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
     });
   }, [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
   var placeholder = React.useMemo(function () {
@@ -180,7 +180,7 @@ export var useFieldState = function useFieldState(params) {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      var sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros);
+      var sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     var newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/legacy/internals/utils/validation/extractValidationProps.js

@@ -1,4 +1,4 @@
-var VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minuteStep'];
+var VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minutesStep'];
 /**
  * Extract the validation props for the props received by a component.
  * Limit the risk of forgetting some of them and reduce the bundle size.

package/legacy/tests/describeValidation/testTextFieldValidation.js

@@ -433,5 +433,31 @@ export var testTextFieldValidation = function testTextFieldValidation(ElementToT
       expect(onErrorMock.lastCall.args[0]).to.equal(null);
       expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
     });
+    it('should apply minutesStep', function test() {
+      if (['picker', 'field'].includes(componentFamily) && !withTime) {
+        return;
+      }
+      var onErrorMock = spy();
+      var _render14 = render( /*#__PURE__*/_jsx(ElementToTest, {
+          onError: onErrorMock,
+          value: adapterToUse.date(new Date(2019, 5, 15, 10, 15)),
+          minutesStep: 30
+        })),
+        setProps = _render14.setProps;
+      if (withTime) {
+        expect(onErrorMock.callCount).to.equal(1);
+        expect(onErrorMock.lastCall.args[0]).to.equal('minutesStep');
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'true');
+        setProps({
+          value: adapterToUse.date(new Date(2019, 5, 15, 10, 30))
+        });
+        expect(onErrorMock.callCount).to.equal(2);
+        expect(onErrorMock.lastCall.args[0]).to.equal(null);
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      } else {
+        expect(onErrorMock.callCount).to.equal(0);
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      }
+    });
   });
 };

package/modern/DateField/DateField.js

@@ -204,6 +204,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/modern/DateTimeField/DateTimeField.js

@@ -237,6 +237,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -31,7 +31,9 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
   const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
-  const views = defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {

package/modern/TimeField/TimeField.js

@@ -221,6 +221,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.3.0
+ * @mui/x-date-pickers v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -312,7 +312,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros) => {
+export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -400,7 +400,7 @@ export const splitFormatIntoSections = (utils, localeText, format, date, formatD
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
-      if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {

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

@@ -30,7 +30,7 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
@@ -154,7 +154,7 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros);
+      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/modern/internals/utils/validation/extractValidationProps.js

@@ -1,4 +1,4 @@
-const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minuteStep'];
+const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minutesStep'];
 /**
  * Extract the validation props for the props received by a component.
  * Limit the risk of forgetting some of them and reduce the bundle size.

package/modern/tests/describeValidation/testTextFieldValidation.js

@@ -439,5 +439,32 @@ export const testTextFieldValidation = (ElementToTest, getOptions) => {
       expect(onErrorMock.lastCall.args[0]).to.equal(null);
       expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
     });
+    it('should apply minutesStep', function test() {
+      if (['picker', 'field'].includes(componentFamily) && !withTime) {
+        return;
+      }
+      const onErrorMock = spy();
+      const {
+        setProps
+      } = render( /*#__PURE__*/_jsx(ElementToTest, {
+        onError: onErrorMock,
+        value: adapterToUse.date(new Date(2019, 5, 15, 10, 15)),
+        minutesStep: 30
+      }));
+      if (withTime) {
+        expect(onErrorMock.callCount).to.equal(1);
+        expect(onErrorMock.lastCall.args[0]).to.equal('minutesStep');
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'true');
+        setProps({
+          value: adapterToUse.date(new Date(2019, 5, 15, 10, 30))
+        });
+        expect(onErrorMock.callCount).to.equal(2);
+        expect(onErrorMock.lastCall.args[0]).to.equal(null);
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      } else {
+        expect(onErrorMock.callCount).to.equal(0);
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      }
+    });
   });
 };

package/node/DateField/DateField.js

@@ -214,6 +214,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/node/DateTimeField/DateTimeField.js

@@ -247,6 +247,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -40,7 +40,9 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
   const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
-  const views = defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === _timeViewRenderers.renderMultiSectionDigitalClockTimeView.name;
+  const views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {

package/node/TimeField/TimeField.js

@@ -231,6 +231,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @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.

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.3.0
+ * @mui/x-date-pickers v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -330,7 +330,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros) => {
+const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -418,7 +418,7 @@ const splitFormatIntoSections = (utils, localeText, format, date, formatDensity,
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
-      if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {

package/node/internals/hooks/useField/useFieldState.js

@@ -39,7 +39,7 @@ const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils), [utils]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => (0, _useField.splitFormatIntoSections)(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => (0, _useField.splitFormatIntoSections)(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
@@ -163,7 +163,7 @@ const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = (0, _useField.splitFormatIntoSections)(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros);
+      const sections = (0, _useField.splitFormatIntoSections)(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return (0, _useField.mergeDateIntoReferenceDate)(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/node/internals/utils/validation/extractValidationProps.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractValidationProps = void 0;
-const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minuteStep'];
+const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minutesStep'];
 /**
  * Extract the validation props for the props received by a component.
  * Limit the risk of forgetting some of them and reduce the bundle size.

package/node/tests/describeValidation/testTextFieldValidation.js

@@ -448,6 +448,33 @@ const testTextFieldValidation = (ElementToTest, getOptions) => {
       (0, _chai.expect)(onErrorMock.lastCall.args[0]).to.equal(null);
       (0, _chai.expect)(_utils.screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
     });
+    it('should apply minutesStep', function test() {
+      if (['picker', 'field'].includes(componentFamily) && !withTime) {
+        return;
+      }
+      const onErrorMock = (0, _sinon.spy)();
+      const {
+        setProps
+      } = render( /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementToTest, {
+        onError: onErrorMock,
+        value: _pickersUtils.adapterToUse.date(new Date(2019, 5, 15, 10, 15)),
+        minutesStep: 30
+      }));
+      if (withTime) {
+        (0, _chai.expect)(onErrorMock.callCount).to.equal(1);
+        (0, _chai.expect)(onErrorMock.lastCall.args[0]).to.equal('minutesStep');
+        (0, _chai.expect)(_utils.screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'true');
+        setProps({
+          value: _pickersUtils.adapterToUse.date(new Date(2019, 5, 15, 10, 30))
+        });
+        (0, _chai.expect)(onErrorMock.callCount).to.equal(2);
+        (0, _chai.expect)(onErrorMock.lastCall.args[0]).to.equal(null);
+        (0, _chai.expect)(_utils.screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      } else {
+        (0, _chai.expect)(onErrorMock.callCount).to.equal(0);
+        (0, _chai.expect)(_utils.screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      }
+    });
   });
 };
 exports.testTextFieldValidation = testTextFieldValidation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",

package/tests/describeValidation/testTextFieldValidation.js

@@ -439,5 +439,32 @@ export const testTextFieldValidation = (ElementToTest, getOptions) => {
       expect(onErrorMock.lastCall.args[0]).to.equal(null);
       expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
     });
+    it('should apply minutesStep', function test() {
+      if (['picker', 'field'].includes(componentFamily) && !withTime) {
+        return;
+      }
+      const onErrorMock = spy();
+      const {
+        setProps
+      } = render( /*#__PURE__*/_jsx(ElementToTest, {
+        onError: onErrorMock,
+        value: adapterToUse.date(new Date(2019, 5, 15, 10, 15)),
+        minutesStep: 30
+      }));
+      if (withTime) {
+        expect(onErrorMock.callCount).to.equal(1);
+        expect(onErrorMock.lastCall.args[0]).to.equal('minutesStep');
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'true');
+        setProps({
+          value: adapterToUse.date(new Date(2019, 5, 15, 10, 30))
+        });
+        expect(onErrorMock.callCount).to.equal(2);
+        expect(onErrorMock.lastCall.args[0]).to.equal(null);
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      } else {
+        expect(onErrorMock.callCount).to.equal(0);
+        expect(screen.getByRole('textbox')).to.have.attribute('aria-invalid', 'false');
+      }
+    });
   });
 };

package/timeViewRenderers/timeViewRenderers.d.ts

@@ -11,6 +11,6 @@ export type TimeViewRendererProps<TView extends TimeViewWithMeridiem, TComponent
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
 };
-export declare const renderTimeViewClock: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, ampmInClock, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, showViewSwitcher, disableIgnoringDatePartForTimeValidation, }: TimeViewRendererProps<TimeView, TimeClockProps<TDate>>) => JSX.Element;
+export declare const renderTimeViewClock: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, ampmInClock, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, showViewSwitcher, disableIgnoringDatePartForTimeValidation, }: TimeViewRendererProps<TimeViewWithMeridiem, TimeClockProps<TDate, TimeViewWithMeridiem>>) => JSX.Element;
 export declare const renderDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, }: TimeViewRendererProps<"hours", Omit<DigitalClockProps<TDate>, "timeStep"> & Pick<TimePickerProps<TDate>, "timeSteps">>) => JSX.Element;
-export declare const renderMultiSectionDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, }: TimeViewRendererProps<TimeViewWithMeridiem, Omit<MultiSectionDigitalClockProps<TDate>, "timeSteps"> & Omit<DigitalClockProps<TDate>, "timeStep"> & Pick<TimePickerProps<TDate>, "timeSteps">>) => JSX.Element;
+export declare const renderMultiSectionDigitalClockTimeView: <TDate extends unknown>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, shouldDisableClock, minutesStep, ampm, components, componentsProps, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, }: TimeViewRendererProps<TimeViewWithMeridiem, MultiSectionDigitalClockProps<TDate>>) => JSX.Element;