@mui/x-date-pickers 6.4.0 → 6.6.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,20 +1,55 @@
 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';
 import { testControlledUnControlled } from './testControlledUnControlled';
 import { testPickerOpenCloseLifeCycle } from './testPickerOpenCloseLifeCycle';
 import { testPickerActionBar } from './testPickerActionBar';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TEST_SUITES = [testControlledUnControlled, testPickerOpenCloseLifeCycle, testPickerActionBar];
 function innerDescribeValue(ElementToTest, getOptions) {
+  const options = getOptions();
   const {
-    defaultProps
-  } = getOptions();
+    defaultProps,
+    render,
+    clock,
+    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') {
+    const interactions = buildFieldInteractions({
+      clock,
+      render,
+      Component: ElementToTest
+    });
+    renderWithProps = (props, hook) => interactions.renderWithProps(_extends({}, defaultProps, props), hook, componentFamily);
+  } else {
+    renderWithProps = (props, hook) => {
+      const response = render( /*#__PURE__*/_jsx(WrappedElementToTest, _extends({}, props, {
+        hook: hook
+      })));
+      return _extends({}, response, {
+        input: null,
+        selectSection: () => {
+          throw new Error('You can only select a section on components that render a field');
+        }
+      });
+    };
   }
   TEST_SUITES.forEach(testSuite => {
-    testSuite(WrappedElementToTest, getOptions);
+    testSuite(WrappedElementToTest, _extends({}, options, {
+      renderWithProps
+    }));
   });
 }
 /**

package/tests/describeValue/testControlledUnControlled.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "values", "componentFamily", "emptyValue", "assertRenderedValue", "setNewValue", "clock"];
+const _excluded = ["render", "renderWithProps", "values", "componentFamily", "emptyValue", "assertRenderedValue", "setNewValue", "clock"];
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
@@ -9,18 +9,18 @@ import { inputBaseClasses } from '@mui/material/InputBase';
 import { getExpectedOnChangeCount } from 'test/utils/pickers-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const testControlledUnControlled = (ElementToTest, getOptions) => {
-  const _getOptions = getOptions(),
-    {
+export const testControlledUnControlled = (ElementToTest, options) => {
+  const {
       render,
+      renderWithProps,
       values,
       componentFamily,
       emptyValue,
       assertRenderedValue,
       setNewValue,
       clock
-    } = _getOptions,
-    pickerParams = _objectWithoutPropertiesLoose(_getOptions, _excluded);
+    } = options,
+    pickerParams = _objectWithoutPropertiesLoose(options, _excluded);
   const params = pickerParams;
   describe('Controlled / uncontrolled value', () => {
     it('should render `props.defaultValue` if no `props.value` is passed', () => {
@@ -48,14 +48,18 @@ export const testControlledUnControlled = (ElementToTest, getOptions) => {
     });
     it('should call onChange when updating a value defined with `props.defaultValue` and update the rendered value', () => {
       const onChange = spy();
-      render( /*#__PURE__*/_jsx(ElementToTest, {
+      const {
+        selectSection
+      } = renderWithProps({
         defaultValue: values[0],
-        onChange: onChange
-      }));
-      const newValue = setNewValue(values[0]);
+        onChange
+      });
+      const newValue = setNewValue(values[0], {
+        selectSection
+      });
       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);
@@ -66,12 +70,27 @@ export const testControlledUnControlled = (ElementToTest, getOptions) => {
     });
     it('should call onChange when updating a value defined with `props.value`', () => {
       const onChange = spy();
-      render( /*#__PURE__*/_jsx(ElementToTest, {
+      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({
         value: values[0],
-        onChange: onChange
-      }));
-      const newValue = setNewValue(values[0]);
-      expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily));
+        onChange
+      }, useControlledElement);
+      const newValue = setNewValue(values[0], {
+        selectSection
+      });
+      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,18 +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, getOptions) => {
+export const testPickerActionBar = (ElementToTest, options) => {
   const {
-    componentFamily,
-    render,
-    values,
-    emptyValue,
-    setNewValue,
-    type
-  } = getOptions();
+      componentFamily,
+      render,
+      renderWithProps,
+      values,
+      emptyValue,
+      setNewValue
+    } = options,
+    pickerParams = _objectWithoutPropertiesLoose(options, _excluded);
   if (componentFamily !== 'picker') {
     return;
   }
@@ -38,7 +41,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
         // 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]);
           });
@@ -46,7 +49,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           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]);
           });
@@ -84,10 +87,12 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
         const onChange = spy();
         const onAccept = spy();
         const onClose = spy();
-        render( /*#__PURE__*/_jsx(ElementToTest, {
-          onChange: onChange,
-          onAccept: onAccept,
-          onClose: onClose,
+        const {
+          selectSection
+        } = renderWithProps({
+          onChange,
+          onAccept,
+          onClose,
           open: true,
           value: values[0],
           slotProps: {
@@ -96,17 +101,18 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
             }
           },
           closeOnSelect: false
-        }));
+        });
 
         // Change the value (already tested)
         setNewValue(values[0], {
-          isOpened: true
+          isOpened: true,
+          selectSection
         });
 
         // 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);
           });
@@ -146,10 +152,12 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
         const onChange = spy();
         const onAccept = spy();
         const onClose = spy();
-        render( /*#__PURE__*/_jsx(ElementToTest, {
-          onChange: onChange,
-          onAccept: onAccept,
-          onClose: onClose,
+        const {
+          selectSection
+        } = renderWithProps({
+          onChange,
+          onAccept,
+          onClose,
           open: true,
           defaultValue: values[0],
           slotProps: {
@@ -158,16 +166,17 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
             }
           },
           closeOnSelect: false
-        }));
+        });
 
         // Change the value (already tested)
         setNewValue(values[0], {
-          isOpened: true
+          isOpened: true,
+          selectSection
         });
 
         // 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);
       });
@@ -238,9 +247,9 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           }
         }));
         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);
           });
@@ -248,7 +257,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           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);
           });