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

package/modern/CalendarPicker/CalendarPicker.js

@@ -1,6 +1,4 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -68,9 +66,7 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
   name: 'MuiCalendarPicker',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer
-})({
-  overflowY: 'auto'
-});
+})({});
 
 /**
  *
@@ -86,11 +82,10 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
   const utils = useUtils();
   const id = useId();
   const props = useCalendarPickerDefaultizedProps(inProps, 'MuiCalendarPicker');
-
   const {
     autoFocus,
     onViewChange,
-    date,
+    value,
     disableFuture,
     disablePast,
     defaultCalendarMonth,
@@ -111,10 +106,16 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     maxDate,
     disableHighlightToday,
     focusedView,
-    onFocusedViewChange
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+    onFocusedViewChange,
+    showDaysOutsideCurrentMonth,
+    dayOfWeekFormatter,
+    renderDay,
+    components,
+    componentsProps,
+    loading,
+    renderLoading,
+    sx
+  } = props;
   const {
     openView,
     setOpenView,
@@ -134,7 +135,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     isDateDisabled,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
-    date,
+    value,
     defaultCalendarMonth,
     reduceAnimations,
     onMonthChange,
@@ -144,7 +145,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     disablePast,
     disableFuture
   });
-  const handleDateMonthChange = React.useCallback((newDate, selectionState) => {
+  const handleDateMonthChange = React.useCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
     const endOfMonth = utils.endOfMonth(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -158,7 +159,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     }) : newDate;
 
     if (closestEnabledDate) {
-      onChange(closestEnabledDate, selectionState);
+      onChange(closestEnabledDate, 'finish');
       onMonthChange?.(startOfMonth);
     } else {
       openNext();
@@ -167,7 +168,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
 
     changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onMonthChange, changeMonth, openNext, utils]);
-  const handleDateYearChange = React.useCallback((newDate, selectionState) => {
+  const handleDateYearChange = React.useCallback(newDate => {
     const startOfYear = utils.startOfYear(newDate);
     const endOfYear = utils.endOfYear(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -181,7 +182,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     }) : newDate;
 
     if (closestEnabledDate) {
-      onChange(closestEnabledDate, selectionState);
+      onChange(closestEnabledDate, 'finish');
       onYearChange?.(closestEnabledDate);
     } else {
       openNext();
@@ -191,35 +192,18 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onYearChange, openNext, utils, changeMonth]);
   const onSelectedDayChange = React.useCallback((day, isFinish) => {
-    if (date && day) {
+    if (value && day) {
       // If there is a date already selected, then we want to keep its time
-      return onChange(utils.mergeDateAndTime(day, date), isFinish);
+      return onChange(utils.mergeDateAndTime(day, value), isFinish);
     }
 
     return onChange(day, isFinish);
-  }, [utils, date, onChange]);
-  React.useEffect(() => {
-    if (date && isDateDisabled(date)) {
-      const closestEnabledDate = findClosestEnabledDate({
-        utils,
-        date,
-        minDate,
-        maxDate,
-        disablePast,
-        disableFuture,
-        isDateDisabled
-      });
-      onChange(closestEnabledDate, 'partial');
-    } // This call is too expensive to run it on each prop change.
-    // So just ensure that we are not rendering disabled as selected on mount.
-
-  }, []); // eslint-disable-line
-
+  }, [utils, value, onChange]);
   React.useEffect(() => {
-    if (date) {
-      changeMonth(date);
+    if (value != null && utils.isValid(value)) {
+      changeMonth(value);
     }
-  }, [date]); // eslint-disable-line
+  }, [value]); // eslint-disable-line
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
@@ -230,8 +214,8 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     minDate
   }; // When disabled, limit the view to the selected date
 
-  const minDateWithDisabled = disabled && date || minDate;
-  const maxDateWithDisabled = disabled && date || maxDate;
+  const minDateWithDisabled = disabled && value || minDate;
+  const maxDateWithDisabled = disabled && value || maxDate;
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
@@ -259,11 +243,16 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       setInternalFocusedView(prevView => prevView === eventView ? null : prevView);
     }
   });
+  React.useEffect(() => {
+    // Set focus to the button when switching from a view to another
+    handleFocusedViewChange(openView)(true);
+  }, [openView, handleFocusedViewChange]);
   return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+    sx: sx,
+    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, {
       views: views,
       openView: openView,
       currentMonth: calendarState.currentMonth,
@@ -278,16 +267,18 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       disablePast: disablePast,
       disableFuture: disableFuture,
       reduceAnimations: reduceAnimations,
-      labelId: gridLabelId
-    })), /*#__PURE__*/_jsx(CalendarPickerViewTransitionContainer, {
+      labelId: gridLabelId,
+      components: components,
+      componentsProps: componentsProps
+    }), /*#__PURE__*/_jsx(CalendarPickerViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
       transKey: openView,
       ownerState: ownerState,
       children: /*#__PURE__*/_jsxs("div", {
-        children: [openView === 'year' && /*#__PURE__*/_jsx(YearPicker, _extends({}, other, baseDateValidationProps, commonViewProps, {
+        children: [openView === 'year' && /*#__PURE__*/_jsx(YearPicker, _extends({}, baseDateValidationProps, commonViewProps, {
           autoFocus: autoFocus,
-          date: date,
+          value: value,
           onChange: handleDateYearChange,
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
@@ -296,21 +287,28 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
           autoFocus: autoFocus,
           hasFocus: hasFocus,
           className: className,
-          date: date,
+          value: value,
           onChange: handleDateMonthChange,
           shouldDisableMonth: shouldDisableMonth,
           onFocusedViewChange: handleFocusedViewChange('month')
-        })), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, other, calendarState, baseDateValidationProps, commonViewProps, {
+        })), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           autoFocus: autoFocus,
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
           reduceAnimations: reduceAnimations,
-          selectedDays: [date],
+          selectedDays: [value],
           onSelectedDaysChange: onSelectedDayChange,
           shouldDisableDate: shouldDisableDate,
+          shouldDisableMonth: shouldDisableMonth,
+          shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: handleFocusedViewChange('day'),
-          gridLabelId: gridLabelId
+          gridLabelId: gridLabelId,
+          showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+          dayOfWeekFormatter: dayOfWeekFormatter,
+          renderDay: renderDay,
+          loading: loading,
+          renderLoading: renderLoading
         }))]
       })
     })]
@@ -336,7 +334,6 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * @default {}
    */
   componentsProps: PropTypes.object,
-  date: PropTypes.any,
 
   /**
    * Formats the day of week displayed in the calendar header.
@@ -376,20 +373,6 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
   disablePast: PropTypes.bool,
   focusedView: PropTypes.oneOf(['day', 'month', 'year']),
 
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
-
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -469,12 +452,6 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    */
   renderLoading: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -507,6 +484,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.any,
+
   /**
    * Controlled open view.
    */

package/modern/CalendarPicker/DayPicker.js

@@ -8,7 +8,7 @@ import { PickersDay } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { PickersSlideTransition } from './PickersSlideTransition';
-import { useIsDayDisabled } from '../internals/hooks/validation/useDateValidation';
+import { useIsDateDisabled } from '../internals/hooks/validation/useDateValidation';
 import { findClosestEnabledDate } from '../internals/utils/date-utils';
 import { getDayPickerUtilityClass } from './dayPickerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -128,13 +128,17 @@ export function DayPicker(inProps) {
     minDate,
     maxDate,
     shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
     dayOfWeekFormatter = defaultDayOfWeekFormatter,
     hasFocus,
     onFocusedViewChange,
     gridLabelId
   } = props;
-  const isDateDisabled = useIsDayDisabled({
+  const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
     minDate,
     maxDate,
     disablePast,

package/modern/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 ?? localeText.previousMonth;
-  const rightArrowButtonText = rightArrowButtonTextProp ?? localeText.nextMonth;
-  const getViewSwitchingButtonText = 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/modern/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,
@@ -52,8 +52,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(date ?? defaultCalendarMonth ?? now),
+    focusedDay: value || now,
+    currentMonth: utils.startOfMonth(value ?? defaultCalendarMonth ?? now),
     slideDirection: 'left'
   });
   const handleChangeMonth = React.useCallback(payload => {
@@ -66,7 +66,7 @@ export const useCalendarState = ({
     }
   }, [onMonthChange]);
   const changeMonth = React.useCallback(newDate => {
-    const newDateRequested = newDate ?? now;
+    const newDateRequested = newDate;
 
     if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
       return;
@@ -76,8 +76,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/modern/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/modern/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;