@mui/x-date-pickers 6.2.1 → 6.3.0

package/modern/tests/describeValue/testPickerActionBar.js

@@ -2,6 +2,7 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 export const testPickerActionBar = (ElementToTest, getOptions) => {
   const {
@@ -10,17 +11,11 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
     values,
     emptyValue,
     setNewValue,
-    variant,
     type
   } = getOptions();
   if (componentFamily !== 'picker') {
     return;
   }
-
-  // No view to test
-  if (variant === 'desktop' && type === 'time') {
-    return;
-  }
   describe('Picker action bar', () => {
     describe('clear action', () => {
       it('should call onClose, onChange with empty value and onAccept with empty value', () => {
@@ -33,7 +28,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onClose: onClose,
           defaultValue: values[0],
           open: true,
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['clear']
             }
@@ -69,7 +64,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onAccept: onAccept,
           onClose: onClose,
           open: true,
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['clear']
             }
@@ -95,7 +90,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onClose: onClose,
           open: true,
           value: values[0],
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['cancel']
             }
@@ -131,7 +126,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onClose: onClose,
           open: true,
           value: values[0],
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['cancel']
             }
@@ -157,7 +152,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onClose: onClose,
           open: true,
           defaultValue: values[0],
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['accept']
             }
@@ -186,7 +181,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onClose: onClose,
           open: true,
           defaultValue: values[0],
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['accept']
             }
@@ -210,7 +205,7 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
           onClose: onClose,
           open: true,
           value: values[0],
-          componentsProps: {
+          slotProps: {
             actionBar: {
               actions: ['accept']
             }
@@ -225,5 +220,43 @@ export const testPickerActionBar = (ElementToTest, getOptions) => {
         expect(onClose.callCount).to.equal(1);
       });
     });
+    describe('today action', () => {
+      it("should call onClose, onChange with today's value and onAccept with today's value", () => {
+        const onChange = spy();
+        const onAccept = spy();
+        const onClose = spy();
+        render( /*#__PURE__*/_jsx(ElementToTest, {
+          onChange: onChange,
+          onAccept: onAccept,
+          onClose: onClose,
+          defaultValue: values[0],
+          open: true,
+          slotProps: {
+            actionBar: {
+              actions: ['today']
+            }
+          }
+        }));
+        userEvent.mousePress(screen.getByText(/today/i));
+        const startOfToday = type === 'date' ? adapterToUse.startOfDay(adapterToUse.date()) : adapterToUse.date();
+        expect(onChange.callCount).to.equal(1);
+        if (type === 'date-range') {
+          onChange.lastCall.args[0].forEach(value => {
+            expect(value).toEqualDateTime(startOfToday);
+          });
+        } else {
+          expect(onChange.lastCall.args[0]).toEqualDateTime(startOfToday);
+        }
+        expect(onAccept.callCount).to.equal(1);
+        if (type === 'date-range') {
+          onAccept.lastCall.args[0].forEach(value => {
+            expect(value).toEqualDateTime(startOfToday);
+          });
+        } else {
+          expect(onAccept.lastCall.args[0]).toEqualDateTime(startOfToday);
+        }
+        expect(onClose.callCount).to.equal(1);
+      });
+    });
   });
 };

package/modern/tests/describeValue/testPickerOpenCloseLifeCycle.js

@@ -18,11 +18,6 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, getOptions) => {
   if (componentFamily !== 'picker') {
     return;
   }
-
-  // No view to test
-  if (pickerParams.variant === 'desktop' && pickerParams.type === 'time') {
-    return;
-  }
   const viewWrapperRole = pickerParams.type === 'date-range' && pickerParams.variant === 'desktop' ? 'tooltip' : 'dialog';
   describe('Picker open / close lifecycle', () => {
     it('should not open on mount if `props.open` is false', () => {

package/modern/timeViewRenderers/index.js

@@ -1 +1 @@
-export { renderTimeViewClock } from './timeViewRenderers';
+export { renderTimeViewClock, renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from './timeViewRenderers';

package/modern/timeViewRenderers/timeViewRenderers.js

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { TimeClock } from '../TimeClock';
+import { DigitalClock } from '../DigitalClock';
+import { MultiSectionDigitalClock } from '../MultiSectionDigitalClock';
+import { isTimeView } from '../internals/utils/time-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const isTimePickerView = view => view === 'hours' || view === 'minutes' || view === 'seconds';
 export const renderTimeViewClock = ({
   view,
   onViewChange,
+  focusedView,
+  onFocusedViewChange,
   views,
   value,
   defaultValue,
@@ -33,7 +37,9 @@ export const renderTimeViewClock = ({
 }) => /*#__PURE__*/_jsx(TimeClock, {
   view: view,
   onViewChange: onViewChange,
-  views: views.filter(isTimePickerView),
+  focusedView: focusedView,
+  onFocusedViewChange: onFocusedViewChange,
+  views: views.filter(isTimeView),
   value: value,
   defaultValue: defaultValue,
   onChange: onChange,
@@ -58,4 +64,126 @@ export const renderTimeViewClock = ({
   autoFocus: autoFocus,
   showViewSwitcher: showViewSwitcher,
   disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation
+});
+export const renderDigitalClockTimeView = ({
+  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
+}) => /*#__PURE__*/_jsx(DigitalClock, {
+  view: view,
+  onViewChange: onViewChange,
+  focusedView: focusedView,
+  onFocusedViewChange: onFocusedViewChange,
+  views: views.filter(isTimeView),
+  value: value,
+  defaultValue: defaultValue,
+  onChange: onChange,
+  className: className,
+  classes: classes,
+  disableFuture: disableFuture,
+  disablePast: disablePast,
+  minTime: minTime,
+  maxTime: maxTime,
+  shouldDisableTime: shouldDisableTime,
+  shouldDisableClock: shouldDisableClock,
+  minutesStep: minutesStep,
+  ampm: ampm,
+  components: components,
+  componentsProps: componentsProps,
+  slots: slots,
+  slotProps: slotProps,
+  readOnly: readOnly,
+  disabled: disabled,
+  sx: sx,
+  autoFocus: autoFocus,
+  disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+  timeStep: timeSteps?.minutes,
+  skipDisabled: skipDisabled
+});
+export const renderMultiSectionDigitalClockTimeView = ({
+  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
+}) => /*#__PURE__*/_jsx(MultiSectionDigitalClock, {
+  view: view,
+  onViewChange: onViewChange,
+  focusedView: focusedView,
+  onFocusedViewChange: onFocusedViewChange,
+  views: views.filter(isTimeView),
+  value: value,
+  defaultValue: defaultValue,
+  onChange: onChange,
+  className: className,
+  classes: classes,
+  disableFuture: disableFuture,
+  disablePast: disablePast,
+  minTime: minTime,
+  maxTime: maxTime,
+  shouldDisableTime: shouldDisableTime,
+  shouldDisableClock: shouldDisableClock,
+  minutesStep: minutesStep,
+  ampm: ampm,
+  components: components,
+  componentsProps: componentsProps,
+  slots: slots,
+  slotProps: slotProps,
+  readOnly: readOnly,
+  disabled: disabled,
+  sx: sx,
+  autoFocus: autoFocus,
+  disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+  timeSteps: timeSteps,
+  skipDisabled: skipDisabled
 });