@mui/x-date-pickers 6.2.1 → 6.3.0

package/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/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/themeAugmentation/components.d.ts

@@ -41,6 +41,10 @@ export interface PickerComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiDayCalendarSkeleton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDayCalendarSkeleton'];
   };
+  MuiDigitalClock?: {
+    defaultProps?: ComponentsProps['MuiDigitalClock'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDigitalClock'];
+  };
   MuiLocalizationProvider?: {
     defaultProps?: ComponentsProps['MuiLocalizationProvider'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiLocalizationProvider'];
@@ -49,6 +53,14 @@ export interface PickerComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiMonthCalendar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMonthCalendar'];
   };
+  MuiMultiSectionDigitalClock?: {
+    defaultProps?: ComponentsProps['MuiMultiSectionDigitalClock'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiSectionDigitalClock'];
+  };
+  MuiMultiSectionDigitalClockSection?: {
+    defaultProps?: ComponentsProps['MuiMultiSectionDigitalClockSection'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiSectionDigitalClockSection'];
+  };
   MuiPickersArrowSwitcher?: {
     defaultProps?: ComponentsProps['MuiPickersArrowSwitcher'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPickersArrowSwitcher'];

package/themeAugmentation/overrides.d.ts

@@ -26,6 +26,11 @@ import {
   PickersToolbarClassKey,
   PickersToolbarTextClassKey,
 } from '../internals';
+import { DigitalClockClassKey } from '../DigitalClock';
+import {
+  MultiSectionDigitalClockClassKey,
+  MultiSectionDigitalClockSectionClassKey,
+} from '../MultiSectionDigitalClock';
 
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
@@ -39,8 +44,11 @@ export interface PickersComponentNameToClassKey {
   MuiDateTimePickerToolbar: DateTimePickerToolbarClassKey;
   MuiDayCalendar: DayCalendarClassKey;
   MuiDayCalendarSkeleton: DayCalendarSkeletonClassKey;
+  MuiDigitalClock: DigitalClockClassKey;
   MuiLocalizationProvider: never;
   MuiMonthCalendar: MonthCalendarClassKey;
+  MuiMultiSectionDigitalClock: MultiSectionDigitalClockClassKey;
+  MuiMultiSectionDigitalClockSection: MultiSectionDigitalClockSectionClassKey;
   MuiPickersArrowSwitcher: PickersArrowSwitcherClassKey;
   MuiPickersCalendarHeader: PickersCalendarHeaderClassKey;
   MuiPickersDay: PickersDayClassKey;

package/themeAugmentation/props.d.ts

@@ -40,6 +40,11 @@ import { TimePickerProps, TimePickerToolbarProps } from '../TimePicker';
 import { DesktopTimePickerProps } from '../DesktopTimePicker';
 import { MobileTimePickerProps } from '../MobileTimePicker';
 import { StaticTimePickerProps } from '../StaticTimePicker';
+import { ExportedDigitalClockProps } from '../DigitalClock';
+import {
+  ExportedMultiSectionDigitalClockSectionProps,
+  MultiSectionDigitalClockProps,
+} from '../MultiSectionDigitalClock';
 
 export interface PickersComponentsPropsList {
   MuiClock: ClockProps<unknown>;
@@ -52,8 +57,11 @@ export interface PickersComponentsPropsList {
   MuiDateTimePickerToolbar: DateTimePickerToolbarProps<unknown>;
   MuiDayCalendar: DayCalendarProps<unknown>;
   MuiDayCalendarSkeleton: DayCalendarSkeletonProps;
+  MuiDigitalClock: ExportedDigitalClockProps<unknown>;
   MuiLocalizationProvider: LocalizationProviderProps<unknown>;
   MuiMonthCalendar: MonthCalendarProps<unknown>;
+  MuiMultiSectionDigitalClock: MultiSectionDigitalClockProps<unknown>;
+  MuiMultiSectionDigitalClockSection: ExportedMultiSectionDigitalClockSectionProps;
   MuiPickersArrowSwitcher: ExportedPickersArrowSwitcherProps;
   MuiPickersCalendarHeader: ExportedCalendarHeaderProps<unknown>;
   MuiPickersDay: PickersDayProps<unknown>;

package/timeViewRenderers/index.d.ts

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

package/timeViewRenderers/index.js

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

package/timeViewRenderers/timeViewRenderers.d.ts

@@ -1,9 +1,16 @@
 /// <reference types="react" />
 import { TimeClockProps } from '../TimeClock';
-import { DateOrTimeView } from '../models';
-export interface TimeViewRendererProps<TDate, TView extends DateOrTimeView> extends Omit<TimeClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange'> {
+import { TimeView } from '../models';
+import { DigitalClockProps } from '../DigitalClock';
+import { BaseClockProps } from '../internals/models/props/clock';
+import { MultiSectionDigitalClockProps } from '../MultiSectionDigitalClock';
+import { TimeViewWithMeridiem } from '../internals/models';
+import type { TimePickerProps } from '../TimePicker/TimePicker.types';
+export type TimeViewRendererProps<TView extends TimeViewWithMeridiem, TComponentProps extends BaseClockProps<any, any>> = Omit<TComponentProps, 'views' | 'openTo' | 'view' | 'onViewChange'> & {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
-}
-export declare const renderTimeViewClock: <TDate extends unknown>({ view, onViewChange, 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<TDate, any>) => 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>>) => 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;

package/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 == null ? void 0 : 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
 });