@mui/x-date-pickers 6.5.0 → 6.7.0

package/tests/describeValidation/testDayViewValidation.js

@@ -17,33 +17,34 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
     return;
   }
   describe('day view:', () => {
-    const defaultProps = _extends({
+    const defaultProps = {
       onChange: () => {},
       open: true,
       view: 'day',
-      reduceAnimations: true
-    }, componentFamily.includes('legacy-') ? {
-      componentsProps: {
-        toolbar: {
-          hidden: true
-        }
-      }
-    } : {
+      reduceAnimations: true,
       slotProps: {
         toolbar: {
           hidden: true
         }
       }
-    });
+    };
     it('should apply shouldDisableDate', function test() {
       render( /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, {
         value: adapterToUse.date(new Date(2018, 2, 12)),
         shouldDisableDate: date => adapterToUse.isAfter(date, adapterToUse.date(new Date(2018, 2, 10)))
       })));
-      expect(screen.getByText('9')).not.to.have.attribute('disabled');
-      expect(screen.getByText('10')).not.to.have.attribute('disabled');
-      expect(screen.getByText('11')).to.have.attribute('disabled');
-      expect(screen.getByText('12')).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '9'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '10'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '11'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '12'
+      })).to.have.attribute('disabled');
     });
     it('should apply shouldDisableYear', function test() {
       const {
@@ -52,16 +53,28 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
         value: adapterToUse.date(new Date(2018, 2, 12)),
         shouldDisableYear: date => adapterToUse.getYear(date) === 2018
       })));
-      expect(screen.getByText('1')).to.have.attribute('disabled');
-      expect(screen.getByText('15')).to.have.attribute('disabled');
-      expect(screen.getByText('30')).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '15'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).to.have.attribute('disabled');
       setProps({
         value: adapterToUse.date(new Date(2019, 0, 1))
       });
       clock.runToLast();
-      expect(screen.getByText('1')).not.to.have.attribute('disabled');
-      expect(screen.getByText('15')).not.to.have.attribute('disabled');
-      expect(screen.getByText('30')).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '15'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).not.to.have.attribute('disabled');
     });
     it('should apply shouldDisableMonth', function test() {
       const {
@@ -70,16 +83,28 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
         value: adapterToUse.date(new Date(2018, 2, 12)),
         shouldDisableMonth: date => adapterToUse.getMonth(date) === 2
       })));
-      expect(screen.getByText('1')).to.have.attribute('disabled');
-      expect(screen.getByText('15')).to.have.attribute('disabled');
-      expect(screen.getByText('30')).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '15'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).to.have.attribute('disabled');
       setProps({
         value: adapterToUse.date(new Date(2018, 1, 1))
       });
       clock.runToLast();
-      expect(screen.getByText('1')).not.to.have.attribute('disabled');
-      expect(screen.getByText('15')).not.to.have.attribute('disabled');
-      expect(screen.getByText('28')).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '15'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '28'
+      })).not.to.have.attribute('disabled');
     });
     it('should apply disablePast', function test() {
       let now;
@@ -96,21 +121,27 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
       })));
       const tomorrow = adapterToUse.addDays(now, 1);
       const yesterday = adapterToUse.addDays(now, -1);
-      expect(screen.getByText(adapterToUse.format(now, 'dayOfMonth'))).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: adapterToUse.format(now, 'dayOfMonth')
+      })).not.to.have.attribute('disabled');
       if (!adapterToUse.isSameMonth(now, tomorrow)) {
         setProps({
           value: tomorrow
         });
         clock.runToLast();
       }
-      expect(screen.getByText(adapterToUse.format(tomorrow, 'dayOfMonth'))).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: adapterToUse.format(tomorrow, 'dayOfMonth')
+      })).not.to.have.attribute('disabled');
       if (!adapterToUse.isSameMonth(yesterday, tomorrow)) {
         setProps({
           value: yesterday
         });
         clock.runToLast();
       }
-      expect(screen.getByText(adapterToUse.format(yesterday, 'dayOfMonth'))).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: adapterToUse.format(yesterday, 'dayOfMonth')
+      })).to.have.attribute('disabled');
     });
     it('should apply disableFuture', function test() {
       let now;
@@ -127,32 +158,48 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
       })));
       const tomorrow = adapterToUse.addDays(now, 1);
       const yesterday = adapterToUse.addDays(now, -1);
-      expect(screen.getByText(adapterToUse.format(now, 'dayOfMonth'))).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: adapterToUse.format(now, 'dayOfMonth')
+      })).not.to.have.attribute('disabled');
       if (!adapterToUse.isSameMonth(now, tomorrow)) {
         setProps({
           value: tomorrow
         });
         clock.runToLast();
       }
-      expect(screen.getByText(adapterToUse.format(tomorrow, 'dayOfMonth'))).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: adapterToUse.format(tomorrow, 'dayOfMonth')
+      })).to.have.attribute('disabled');
       if (!adapterToUse.isSameMonth(yesterday, tomorrow)) {
         setProps({
           value: yesterday
         });
         clock.runToLast();
       }
-      expect(screen.getByText(adapterToUse.format(yesterday, 'dayOfMonth'))).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: adapterToUse.format(yesterday, 'dayOfMonth')
+      })).not.to.have.attribute('disabled');
     });
     it('should apply minDate', function test() {
       render( /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, {
         value: adapterToUse.date(new Date(2019, 5, 15)),
         minDate: adapterToUse.date(new Date(2019, 5, 4))
       })));
-      expect(screen.getByText('1')).to.have.attribute('disabled');
-      expect(screen.getByText('3')).to.have.attribute('disabled');
-      expect(screen.getByText('4')).not.to.have.attribute('disabled');
-      expect(screen.getByText('5')).not.to.have.attribute('disabled');
-      expect(screen.getByText('30')).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '3'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '4'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '5'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).not.to.have.attribute('disabled');
       expect(screen.getByLabelText('Previous month')).to.have.attribute('disabled');
       expect(screen.getByLabelText('Next month')).not.to.have.attribute('disabled');
     });
@@ -161,11 +208,21 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
         value: adapterToUse.date(new Date(2019, 5, 15)),
         maxDate: adapterToUse.date(new Date(2019, 5, 4))
       })));
-      expect(screen.getByText('1')).not.to.have.attribute('disabled');
-      expect(screen.getByText('3')).not.to.have.attribute('disabled');
-      expect(screen.getByText('4')).not.to.have.attribute('disabled');
-      expect(screen.getByText('5')).to.have.attribute('disabled');
-      expect(screen.getByText('30')).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '3'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '4'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '5'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).to.have.attribute('disabled');
       expect(screen.getByLabelText('Previous month')).not.to.have.attribute('disabled');
       expect(screen.getByLabelText('Next month')).to.have.attribute('disabled');
     });
@@ -178,11 +235,21 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
         value: adapterToUse.date(new Date(2019, 5, 15)),
         maxDateTime: adapterToUse.date(new Date(2019, 5, 4, 12, 0, 0))
       })));
-      expect(screen.getByText('1')).not.to.have.attribute('disabled');
-      expect(screen.getByText('3')).not.to.have.attribute('disabled');
-      expect(screen.getByText('4')).not.to.have.attribute('disabled');
-      expect(screen.getByText('5')).to.have.attribute('disabled');
-      expect(screen.getByText('30')).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '3'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '4'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '5'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).to.have.attribute('disabled');
     });
     it('should apply minDateTime', function test() {
       if (!withDate || !withTime) {
@@ -193,11 +260,21 @@ export const testDayViewValidation = (ElementToTest, getOptions) => {
         value: adapterToUse.date(new Date(2019, 5, 15)),
         minDateTime: adapterToUse.date(new Date(2019, 5, 4, 12, 0, 0))
       })));
-      expect(screen.getByText('1')).to.have.attribute('disabled');
-      expect(screen.getByText('3')).to.have.attribute('disabled');
-      expect(screen.getByText('4')).not.to.have.attribute('disabled');
-      expect(screen.getByText('5')).not.to.have.attribute('disabled');
-      expect(screen.getByText('30')).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '1'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '3'
+      })).to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '4'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '5'
+      })).not.to.have.attribute('disabled');
+      expect(screen.getByRole('gridcell', {
+        name: '30'
+      })).not.to.have.attribute('disabled');
     });
   });
 };

package/tests/describeValidation/testMinutesViewValidation.js

@@ -19,25 +19,18 @@ export const testMinutesViewValidation = (ElementToTest, getOption) => {
     return;
   }
   describe('minutes view:', () => {
-    const defaultProps = _extends({
+    const defaultProps = {
       onChange: () => {},
       open: true,
       view: 'minutes',
       openTo: 'minutes',
-      reduceAnimations: true
-    }, componentFamily.includes('legacy-') ? {
-      componentsProps: {
-        toolbar: {
-          hidden: true
-        }
-      }
-    } : {
+      reduceAnimations: true,
       slotProps: {
         toolbar: {
           hidden: true
         }
       }
-    });
+    };
     it('should apply shouldDisableTime', function test() {
       render( /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, {
         value: adapterToUse.date(new Date(2018, 2, 12, 8, 15, 0)),

package/tests/describeValidation/testMonthViewValidation.js

@@ -21,22 +21,15 @@ export const testMonthViewValidation = (ElementToTest, getOptions) => {
       views: ['month'],
       view: 'month',
       openTo: 'month'
-    }, componentFamily !== 'calendar' && _extends({
+    }, componentFamily !== 'calendar' && {
       open: true,
-      reduceAnimations: true
-    }, componentFamily.includes('legacy-') ? {
-      componentsProps: {
-        toolbar: {
-          hidden: true
-        }
-      }
-    } : {
+      reduceAnimations: true,
       slotProps: {
         toolbar: {
           hidden: true
         }
       }
-    }));
+    });
     it('should apply shouldDisableMonth', function test() {
       render( /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, {
         value: null,

package/tests/describeValidation/testYearViewValidation.js

@@ -20,22 +20,15 @@ export const testYearViewValidation = (ElementToTest, getOptions) => {
       views: ['year'],
       view: 'year',
       openTo: 'year'
-    }, componentFamily !== 'calendar' && _extends({
+    }, componentFamily !== 'calendar' && {
       open: true,
-      reduceAnimations: true
-    }, componentFamily.includes('legacy-') ? {
-      componentsProps: {
-        toolbar: {
-          hidden: true
-        }
-      }
-    } : {
+      reduceAnimations: true,
       slotProps: {
         toolbar: {
           hidden: true
         }
       }
-    }));
+    });
     it('should apply shouldDisableYear', function test() {
       render( /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, {
         value: null,

package/tests/describeValue/describeValue.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["hook"];
 import * as React from 'react';
 import createDescribe from '@mui/monorepo/test/utils/createDescribe';
 import { buildFieldInteractions } from 'test/utils/pickers-utils';
@@ -16,7 +18,12 @@ function innerDescribeValue(ElementToTest, getOptions) {
     componentFamily
   } = options;
   function WrappedElementToTest(props) {
-    return /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, props));
+    const {
+        hook
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const hookResult = hook == null ? void 0 : hook(props);
+    return /*#__PURE__*/_jsx(ElementToTest, _extends({}, defaultProps, other, hookResult));
   }
   let renderWithProps;
   if (componentFamily === 'field' || componentFamily === 'picker') {
@@ -25,10 +32,12 @@ function innerDescribeValue(ElementToTest, getOptions) {
       render,
       Component: ElementToTest
     });
-    renderWithProps = props => interactions.renderWithProps(_extends({}, defaultProps, props), componentFamily);
+    renderWithProps = (props, hook) => interactions.renderWithProps(_extends({}, defaultProps, props), hook, componentFamily);
   } else {
-    renderWithProps = props => {
-      const response = render( /*#__PURE__*/_jsx(WrappedElementToTest, _extends({}, props)));
+    renderWithProps = (props, hook) => {
+      const response = render( /*#__PURE__*/_jsx(WrappedElementToTest, _extends({}, props, {
+        hook: hook
+      })));
       return _extends({}, response, {
         input: null,
         selectSection: () => {

package/tests/describeValue/testControlledUnControlled.js

@@ -59,7 +59,7 @@ export const testControlledUnControlled = (ElementToTest, options) => {
       });
       assertRenderedValue(newValue);
       // TODO: Clean this exception or change the clock behavior
-      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily));
+      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, params));
       if (Array.isArray(newValue)) {
         newValue.forEach((value, index) => {
           expect(onChange.lastCall.args[0][index]).toEqualDateTime(value);
@@ -70,16 +70,27 @@ export const testControlledUnControlled = (ElementToTest, options) => {
     });
     it('should call onChange when updating a value defined with `props.value`', () => {
       const onChange = spy();
+      const useControlledElement = props => {
+        const [value, setValue] = React.useState((props == null ? void 0 : props.value) || null);
+        const handleChange = React.useCallback(newValue => {
+          setValue(newValue);
+          props == null ? void 0 : props.onChange(newValue);
+        }, [props]);
+        return {
+          value,
+          onChange: handleChange
+        };
+      };
       const {
         selectSection
       } = renderWithProps({
-        defaultValue: values[0],
+        value: values[0],
         onChange
-      });
+      }, useControlledElement);
       const newValue = setNewValue(values[0], {
         selectSection
       });
-      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily));
+      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, params));
       if (Array.isArray(newValue)) {
         newValue.forEach((value, index) => {
           expect(onChange.lastCall.args[0][index]).toEqualDateTime(value);

package/tests/describeValue/testPickerActionBar.js

@@ -1,19 +1,21 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["componentFamily", "render", "renderWithProps", "values", "emptyValue", "setNewValue"];
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen, userEvent } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse, getExpectedOnChangeCount } from 'test/utils/pickers-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testPickerActionBar = (ElementToTest, options) => {
   const {
-    componentFamily,
-    render,
-    renderWithProps,
-    values,
-    emptyValue,
-    setNewValue,
-    type
-  } = options;
+      componentFamily,
+      render,
+      renderWithProps,
+      values,
+      emptyValue,
+      setNewValue
+    } = options,
+    pickerParams = _objectWithoutPropertiesLoose(options, _excluded);
   if (componentFamily !== 'picker') {
     return;
   }
@@ -39,7 +41,7 @@ export const testPickerActionBar = (ElementToTest, options) => {
         // Clear the date
         userEvent.mousePress(screen.getByText(/clear/i));
         expect(onChange.callCount).to.equal(1);
-        if (type === 'date-range') {
+        if (pickerParams.type === 'date-range') {
           onChange.lastCall.args[0].forEach((value, index) => {
             expect(value).to.deep.equal(emptyValue[index]);
           });
@@ -47,7 +49,7 @@ export const testPickerActionBar = (ElementToTest, options) => {
           expect(onChange.lastCall.args[0]).to.deep.equal(emptyValue);
         }
         expect(onAccept.callCount).to.equal(1);
-        if (type === 'date-range') {
+        if (pickerParams.type === 'date-range') {
           onAccept.lastCall.args[0].forEach((value, index) => {
             expect(value).to.deep.equal(emptyValue[index]);
           });
@@ -109,8 +111,8 @@ export const testPickerActionBar = (ElementToTest, options) => {
 
         // Cancel the modifications
         userEvent.mousePress(screen.getByText(/cancel/i));
-        expect(onChange.callCount).to.equal(2);
-        if (type === 'date-range') {
+        expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams) + 1);
+        if (pickerParams.type === 'date-range') {
           values[0].forEach((value, index) => {
             expect(onChange.lastCall.args[0][index]).toEqualDateTime(value);
           });
@@ -174,7 +176,7 @@ export const testPickerActionBar = (ElementToTest, options) => {
 
         // Accept the modifications
         userEvent.mousePress(screen.getByText(/ok/i));
-        expect(onChange.callCount).to.equal(1); // The accepted value as already been committed, don't call onChange again
+        expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams)); // The accepted value as already been committed, don't call onChange again
         expect(onAccept.callCount).to.equal(1);
         expect(onClose.callCount).to.equal(1);
       });
@@ -245,9 +247,9 @@ export const testPickerActionBar = (ElementToTest, options) => {
           }
         }));
         userEvent.mousePress(screen.getByText(/today/i));
-        const startOfToday = type === 'date' ? adapterToUse.startOfDay(adapterToUse.date()) : adapterToUse.date();
+        const startOfToday = pickerParams.type === 'date' ? adapterToUse.startOfDay(adapterToUse.date()) : adapterToUse.date();
         expect(onChange.callCount).to.equal(1);
-        if (type === 'date-range') {
+        if (pickerParams.type === 'date-range') {
           onChange.lastCall.args[0].forEach(value => {
             expect(value).toEqualDateTime(startOfToday);
           });
@@ -255,7 +257,7 @@ export const testPickerActionBar = (ElementToTest, options) => {
           expect(onChange.lastCall.args[0]).toEqualDateTime(startOfToday);
         }
         expect(onAccept.callCount).to.equal(1);
-        if (type === 'date-range') {
+        if (pickerParams.type === 'date-range') {
           onAccept.lastCall.args[0].forEach(value => {
             expect(value).toEqualDateTime(startOfToday);
           });

package/tests/describeValue/testPickerOpenCloseLifeCycle.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen, userEvent } from '@mui/monorepo/test/utils';
-import { getTextbox, openPicker } from 'test/utils/pickers-utils';
+import { getExpectedOnChangeCount, getTextbox, openPicker } from 'test/utils/pickers-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
   const {
@@ -70,7 +70,7 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
         isOpened: true,
         selectSection
       });
-      expect(onChange.callCount).to.equal(1);
+      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams));
       if (pickerParams.type === 'date-range') {
         newValue = setNewValue(newValue, {
           isOpened: true,
@@ -131,7 +131,7 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
         isOpened: true,
         selectSection
       });
-      expect(onChange.callCount).to.equal(1);
+      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams));
       if (pickerParams.type === 'date-range') {
         newValue = setNewValue(newValue, {
           isOpened: true,
@@ -200,7 +200,8 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
         isOpened: true,
         selectSection
       });
-      expect(onChange.callCount).to.equal(1);
+      const initialChangeCount = getExpectedOnChangeCount(componentFamily, pickerParams);
+      expect(onChange.callCount).to.equal(initialChangeCount);
       if (pickerParams.type === 'date-range') {
         newValue = setNewValue(newValue, {
           isOpened: true,
@@ -232,7 +233,9 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
           expect(onChange.lastCall.args[0][index]).toEqualDateTime(value);
         });
       } else {
-        expect(onChange.callCount).to.equal(2);
+        expect(onChange.callCount).to.equal(initialChangeCount + getExpectedOnChangeCount(componentFamily, pickerParams) - (
+        // meridiem does not change this time in case of multi section digital clock
+        pickerParams.type === 'time' || pickerParams.type === 'date-time' ? 1 : 0));
         expect(onChange.lastCall.args[0]).toEqualDateTime(newValueBis);
       }
       expect(onAccept.callCount).to.equal(0);
@@ -263,7 +266,7 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
       userEvent.keyPress(document.activeElement, {
         key: 'Escape'
       });
-      expect(onChange.callCount).to.equal(1);
+      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams));
       expect(onAccept.callCount).to.equal(1);
       if (pickerParams.type === 'date-range') {
         newValue.forEach((value, index) => {
@@ -324,7 +327,7 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
 
       // Dismiss the picker
       userEvent.mousePress(document.body);
-      expect(onChange.callCount).to.equal(1);
+      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams));
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0]).toEqualDateTime(newValue);
       expect(onClose.callCount).to.equal(1);

package/timeViewRenderers/timeViewRenderers.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TimeClockProps } from '../TimeClock';
 import { TimeView } from '../models';
 import { DigitalClockProps } from '../DigitalClock';
@@ -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<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, MultiSectionDigitalClockProps<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<TimeView, TimeClockProps<TDate, TimeView>>) => React.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">>) => React.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>>) => React.JSX.Element;

package/timeViewRenderers/timeViewRenderers.js

@@ -37,7 +37,7 @@ export const renderTimeViewClock = ({
 }) => /*#__PURE__*/_jsx(TimeClock, {
   view: view,
   onViewChange: onViewChange,
-  focusedView: focusedView,
+  focusedView: focusedView && isTimeView(focusedView) ? focusedView : null,
   onFocusedViewChange: onFocusedViewChange,
   views: views.filter(isTimeView),
   value: value,