@mui/x-date-pickers 5.0.2 → 6.0.0-alpha.0

package/CalendarPicker/PickersCalendarHeader.js

@@ -9,7 +9,6 @@ import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
 import { ArrowDropDown } from '../internals/components/icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
-import { buildDeprecatedPropsWarning } from '../internals/utils/warning';
 import { getPickersCalendarHeaderUtilityClass } from './pickersCalendarHeaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -87,7 +86,6 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDown, {
 }, ownerState.openView === 'year' && {
   transform: 'rotate(180deg)'
 }));
-const deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translation are deprecated. See https://mui.com/x/react-date-pickers/localization for more information.');
 /**
  * @ignore - do not document.
  */
@@ -104,27 +102,16 @@ export function PickersCalendarHeader(inProps) {
     disabled,
     disableFuture,
     disablePast,
-    getViewSwitchingButtonText: getViewSwitchingButtonTextProp,
-    leftArrowButtonText: leftArrowButtonTextProp,
     maxDate,
     minDate,
     onMonthChange,
     onViewChange,
     openView: currentView,
     reduceAnimations,
-    rightArrowButtonText: rightArrowButtonTextProp,
     views,
     labelId
   } = props;
-  deprecatedPropsWarning({
-    leftArrowButtonText: leftArrowButtonTextProp,
-    rightArrowButtonText: rightArrowButtonTextProp,
-    getViewSwitchingButtonText: getViewSwitchingButtonTextProp
-  });
   const localeText = useLocaleText();
-  const leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.previousMonth;
-  const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
-  const getViewSwitchingButtonText = getViewSwitchingButtonTextProp != null ? getViewSwitchingButtonTextProp : localeText.calendarViewSwitchingButtonAriaLabel;
   const utils = useUtils();
   const classes = useUtilityClasses(props);
   const switchViewButtonProps = componentsProps.switchViewButton || {};
@@ -184,7 +171,7 @@ export function PickersCalendarHeader(inProps) {
       }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
-        "aria-label": getViewSwitchingButtonText(currentView),
+        "aria-label": localeText.calendarViewSwitchingButtonAriaLabel(currentView),
         className: classes.switchViewButton
       }, switchViewButtonProps, {
         children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewIcon, {
@@ -196,14 +183,14 @@ export function PickersCalendarHeader(inProps) {
     }), /*#__PURE__*/_jsx(Fade, {
       in: currentView === 'day',
       children: /*#__PURE__*/_jsx(PickersArrowSwitcher, {
-        leftArrowButtonText: leftArrowButtonText,
-        rightArrowButtonText: rightArrowButtonText,
         components: components,
         componentsProps: componentsProps,
-        onLeftClick: selectPreviousMonth,
-        onRightClick: selectNextMonth,
-        isLeftDisabled: isPreviousMonthDisabled,
-        isRightDisabled: isNextMonthDisabled
+        onGoToPrevious: selectPreviousMonth,
+        isPreviousDisabled: isPreviousMonthDisabled,
+        previousLabel: localeText.previousMonth,
+        onGoToNext: selectNextMonth,
+        isNextDisabled: isNextMonthDisabled,
+        nextLabel: localeText.nextMonth
       })
     })]
   });

package/CalendarPicker/useCalendarState.d.ts

@@ -25,10 +25,10 @@ interface ChangeFocusedDayPayload<TDate> {
 export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: {
     type: "finishMonthSwitchingAnimation";
 } | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
-interface CalendarStateInput<TDate> extends Pick<CalendarPickerDefaultizedProps<TDate>, 'date' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+interface CalendarStateInput<TDate> extends Pick<CalendarPickerDefaultizedProps<TDate>, 'value' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
 }
-export declare const useCalendarState: <TDate extends unknown>({ date, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {
+export declare const useCalendarState: <TDate extends unknown>({ value, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {
     calendarState: CalendarState<TDate>;
     changeMonth: (newDate: TDate) => void;
     changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean) => void;

package/CalendarPicker/useCalendarState.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useIsDayDisabled } from '../internals/hooks/validation/useDateValidation';
+import { useIsDateDisabled } from '../internals/hooks/validation/useDateValidation';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
   switch (action.type) {
@@ -36,7 +36,7 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
   }
 };
 export const useCalendarState = ({
-  date,
+  value,
   defaultCalendarMonth,
   disableFuture,
   disablePast,
@@ -54,8 +54,8 @@ export const useCalendarState = ({
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: date || now,
-    currentMonth: utils.startOfMonth((_ref = date != null ? date : defaultCalendarMonth) != null ? _ref : now),
+    focusedDay: value || now,
+    currentMonth: utils.startOfMonth((_ref = value != null ? value : defaultCalendarMonth) != null ? _ref : now),
     slideDirection: 'left'
   });
   const handleChangeMonth = React.useCallback(payload => {
@@ -68,7 +68,7 @@ export const useCalendarState = ({
     }
   }, [onMonthChange]);
   const changeMonth = React.useCallback(newDate => {
-    const newDateRequested = newDate != null ? newDate : now;
+    const newDateRequested = newDate;
 
     if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
       return;
@@ -78,8 +78,8 @@ export const useCalendarState = ({
       newMonth: utils.startOfMonth(newDateRequested),
       direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
     });
-  }, [calendarState.currentMonth, handleChangeMonth, now, utils]);
-  const isDateDisabled = useIsDayDisabled({
+  }, [calendarState.currentMonth, handleChangeMonth, utils]);
+  const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
     minDate,
     maxDate,

package/ClockPicker/Clock.d.ts

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { PickerSelectionState } from '../internals/hooks/usePickerState';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
-import { ClockPickerView, MuiPickersAdapter } from '../internals/models';
+import { ClockPickerView } from '../internals/models';
 import { ClockClasses } from './clockClasses';
 export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
     ampm: boolean;
     ampmInClock: boolean;
     autoFocus?: boolean;
     children: readonly React.ReactNode[];
-    date: TDate | null;
-    getClockLabelText: (view: ClockPickerView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string;
     isTimeDisabled: (timeValue: number, type: ClockPickerView) => boolean;
     minutesStep?: number;
     onChange: (value: number, isFinish?: PickerSelectionState) => void;
@@ -19,7 +17,14 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
      */
     selectedId: string | undefined;
     type: ClockPickerView;
-    value: number;
+    /**
+     * The numeric value of the current view.
+     */
+    viewValue: number;
+    /**
+     * The current full date value.
+     */
+    value: TDate | null;
     disabled?: boolean;
     readOnly?: boolean;
     className?: string;

package/ClockPicker/Clock.js

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
-import { useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { getHours, getMinutes } from './shared';
 import { getClockUtilityClass } from './clockClasses';
@@ -155,8 +155,7 @@ export function Clock(inProps) {
     ampmInClock,
     autoFocus,
     children,
-    date,
-    getClockLabelText,
+    value,
     handleMeridiemChange,
     isTimeDisabled,
     meridiemMode,
@@ -164,18 +163,19 @@ export function Clock(inProps) {
     onChange,
     selectedId,
     type,
-    value,
+    viewValue,
     disabled,
     readOnly,
     className
   } = props;
   const ownerState = props;
   const utils = useUtils();
+  const localeText = useLocaleText();
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const isMoving = React.useRef(false);
   const classes = useUtilityClasses(ownerState);
-  const isSelectedTimeDisabled = isTimeDisabled(value, type);
-  const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
+  const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
+  const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
 
   const handleValueChange = (newValue, isFinish) => {
     if (disabled || readOnly) {
@@ -237,8 +237,8 @@ export function Clock(inProps) {
       return true;
     }
 
-    return value % 5 === 0;
-  }, [type, value]);
+    return viewValue % 5 === 0;
+  }, [type, viewValue]);
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
   const listboxRef = React.useRef(null); // Since this is rendered when a Popper is opened we can't use passive effects.
   // Focusing in passive effects in Popper causes scroll jump.
@@ -269,12 +269,12 @@ export function Clock(inProps) {
         break;
 
       case 'ArrowUp':
-        handleValueChange(value + keyboardControlStep, 'partial');
+        handleValueChange(viewValue + keyboardControlStep, 'partial');
         event.preventDefault();
         break;
 
       case 'ArrowDown':
-        handleValueChange(value - keyboardControlStep, 'partial');
+        handleValueChange(viewValue - keyboardControlStep, 'partial');
         event.preventDefault();
         break;
 
@@ -299,15 +299,15 @@ export function Clock(inProps) {
       }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(ClockPin, {
           className: classes.pin
-        }), date && /*#__PURE__*/_jsx(ClockPointer, {
+        }), value != null && /*#__PURE__*/_jsx(ClockPointer, {
           type: type,
-          value: value,
+          viewValue: viewValue,
           isInner: isPointerInner,
           hasSelected: hasSelected
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": getClockLabelText(type, date, utils),
+        "aria-label": localeText.clockLabelText(type, value, utils),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/ClockPicker/ClockNumbers.d.ts

@@ -3,7 +3,7 @@ import { MuiPickersAdapter } from '../internals/models';
 import { PickerSelectionState } from '../internals/hooks/usePickerState';
 interface GetHourNumbersOptions<TDate> {
     ampm: boolean;
-    date: TDate;
+    value: TDate | null;
     getClockNumberText: (hour: string) => string;
     isDisabled: (value: number) => boolean;
     onChange: (value: number, isFinish?: PickerSelectionState) => void;
@@ -17,8 +17,8 @@ interface GetHourNumbersOptions<TDate> {
 /**
  * @ignore - internal component.
  */
-export declare const getHourNumbers: <TDate extends unknown>({ ampm, date, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions<TDate>) => JSX.Element[];
-export declare const getMinutesNumbers: <TDate extends unknown>({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions<TDate>, "date" | "ampm"> & {
+export declare const getHourNumbers: <TDate extends unknown>({ ampm, value, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions<TDate>) => JSX.Element[];
+export declare const getMinutesNumbers: <TDate extends unknown>({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions<TDate>, "value" | "ampm"> & {
     value: number;
 }) => JSX.Element[];
 export {};

package/ClockPicker/ClockNumbers.js

@@ -7,13 +7,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export const getHourNumbers = ({
   ampm,
-  date,
+  value,
   getClockNumberText,
   isDisabled,
   selectedId,
   utils
 }) => {
-  const currentHours = date ? utils.getHours(date) : null;
+  const currentHours = value ? utils.getHours(value) : null;
   const hourNumbers = [];
   const startHour = ampm ? 1 : 0;
   const endHour = ampm ? 12 : 23;

package/ClockPicker/ClockPicker.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
 import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { ExportedTimeValidationProps } from '../internals/hooks/validation/useTimeValidation';
-import { ClockPickerView, MuiPickersAdapter } from '../internals/models';
+import { ClockPickerView } from '../internals/models';
 import { ClockPickerClasses } from './clockPickerClasses';
 export interface ExportedClockPickerProps<TDate> extends ExportedTimeValidationProps<TDate> {
     /**
@@ -15,33 +17,17 @@ export interface ExportedClockPickerProps<TDate> extends ExportedTimeValidationP
      * @default false
      */
     ampmInClock?: boolean;
-    /**
-     * Accessible text that helps user to understand which time and view is selected.
-     * @template TDate
-     * @param {ClockPickerView} view The current view rendered.
-     * @param {TDate | null} time The current time.
-     * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-     * @returns {string} The clock label.
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-     * @default <TDate extends any>(
-     *   view: ClockView,
-     *   time: TDate | null,
-     *   adapter: MuiPickersAdapter<TDate>,
-     * ) =>
-     *   `Select ${view}. ${
-     *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-     *   }`
-     */
-    getClockLabelText?: (view: ClockPickerView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string;
 }
 export interface ClockPickerSlotsComponent extends PickersArrowSwitcherSlotsComponent {
 }
-export interface ClockPickerComponentsPropsOverrides {
-}
 export interface ClockPickerSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps {
 }
 export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate> {
     className?: string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * Set to `true` if focus should be moved to clock picker.
      */
@@ -63,47 +49,11 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
     /**
      * Selected date @DateIOType.
      */
-    date: TDate | null;
-    /**
-     * Get clock number aria-text for hours.
-     * @param {string} hours The hours to format.
-     * @returns {string} the formatted hours text.
-     * @default (hours: string) => `${hours} hours`
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-     */
-    getHoursClockNumberText?: (hours: string) => string;
-    /**
-     * Get clock number aria-text for minutes.
-     * @param {string} minutes The minutes to format.
-     * @returns {string} the formatted minutes text.
-     * @default (minutes: string) => `${minutes} minutes`
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-     */
-    getMinutesClockNumberText?: (minutes: string) => string;
-    /**
-     * Get clock number aria-text for seconds.
-     * @param {string} seconds The seconds to format.
-     * @returns {string} the formatted seconds text.
-     * @default (seconds: string) => `${seconds} seconds`
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-     */
-    getSecondsClockNumberText?: (seconds: string) => string;
-    /**
-     * Left arrow icon aria-label text.
-     * @default 'open previous view'
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-     */
-    leftArrowButtonText?: string;
+    value: TDate | null;
     /**
      * On change callback @DateIOType.
      */
     onChange: PickerOnChangeFn<TDate>;
-    /**
-     * Right arrow icon aria-label text.
-     * @default 'open next view'
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-     */
-    rightArrowButtonText?: string;
     showViewSwitcher?: boolean;
     /**
      * Controlled open view.