@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/node/DateCalendar/DateCalendar.js

@@ -25,7 +25,7 @@ var _useViews = require("../internals/hooks/useViews");
 var _PickersCalendarHeader = require("../PickersCalendarHeader");
 var _dateUtils = require("../internals/utils/date-utils");
 var _PickerViewRoot = require("../internals/components/PickerViewRoot");
-var _useDefaultReduceAnimations = require("../internals/hooks/useDefaultReduceAnimations");
+var _useReduceAnimations = require("../internals/hooks/useReduceAnimations");
 var _dateCalendarClasses = require("./dateCalendarClasses");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
@@ -43,18 +43,18 @@ const useUtilityClasses = classes => {
 function useDateCalendarDefaultizedProps(props, name) {
   const utils = (0, _useUtils.useUtils)();
   const defaultDates = (0, _useUtils.useDefaultDates)();
-  const defaultReduceAnimations = (0, _useDefaultReduceAnimations.useDefaultReduceAnimations)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const reduceAnimations = (0, _useReduceAnimations.useReduceAnimations)(themeProps.reduceAnimations);
   return (0, _extends2.default)({}, themeProps, {
     loading: themeProps.loading ?? false,
     disablePast: themeProps.disablePast ?? false,
     disableFuture: themeProps.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['year', 'day'],
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: "..."
     })),
@@ -103,7 +103,6 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
       disableFuture,
       disablePast,
       onChange,
-      onYearChange,
       onMonthChange,
       reduceAnimations,
       shouldDisableDate,
@@ -119,7 +118,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
       minDate,
       maxDate,
       disableHighlightToday,
-      focusedView: inFocusedView,
+      focusedView: focusedViewProp,
       onFocusedViewChange,
       showDaysOutsideCurrentMonth,
       fixedWeekNumber,
@@ -162,15 +161,13 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     onChange: handleValueChange,
     onViewChange,
     autoFocus,
-    focusedView: inFocusedView,
+    focusedView: focusedViewProp,
     onFocusedViewChange
   });
   const {
     referenceDate,
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     isDateDisabled,
     onMonthSwitchingAnimationEnd
   } = (0, _useCalendarState.useCalendarState)({
@@ -183,7 +180,13 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     shouldDisableDate,
     disablePast,
     disableFuture,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      if (utils.isSameMonth(visibleDate, prevMonth)) {
+        return prevMonth;
+      }
+      return utils.startOfMonth(visibleDate);
+    }
   });
 
   // When disabled, limit the view to the selected date
@@ -200,9 +203,9 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
       view,
       currentMonth: calendarState.currentMonth,
       onViewChange: setView,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate: minDateWithDisabled,
       maxDate: maxDateWithDisabled,
@@ -230,12 +233,17 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
-      onMonthChange?.(startOfMonth);
+      setVisibleDate({
+        target: closestEnabledDate,
+        reason: 'cell-interaction'
+      });
     } else {
       goToNextView();
-      changeMonth(startOfMonth);
+      setVisibleDate({
+        target: startOfMonth,
+        reason: 'cell-interaction'
+      });
     }
-    changeFocusedDay(closestEnabledDate, true);
   });
   const handleDateYearChange = (0, _utils.unstable_useEventCallback)(newDate => {
     const startOfYear = utils.startOfYear(newDate);
@@ -252,12 +260,17 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
-      onYearChange?.(closestEnabledDate);
+      setVisibleDate({
+        target: closestEnabledDate,
+        reason: 'cell-interaction'
+      });
     } else {
       goToNextView();
-      changeMonth(startOfYear);
+      setVisibleDate({
+        target: startOfYear,
+        reason: 'cell-interaction'
+      });
     }
-    changeFocusedDay(closestEnabledDate, true);
   });
   const handleSelectedDayChange = (0, _utils.unstable_useEventCallback)(day => {
     if (day) {
@@ -267,8 +280,11 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
-    if (value != null && utils.isValid(value)) {
-      changeMonth(value);
+    if (utils.isValid(value)) {
+      setVisibleDate({
+        target: value,
+        reason: 'controlled-value-change'
+      });
     }
   }, [value]); // eslint-disable-line
 
@@ -335,7 +351,10 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
           referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayCalendar.DayCalendar, (0, _extends2.default)({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: selectedDays,
           onSelectedDaysChange: handleSelectedDayChange,

package/node/DateCalendar/DayCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -14,7 +15,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _PickersDay = require("../PickersDay/PickersDay");
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
@@ -26,7 +27,7 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _dayCalendarClasses = require("./dayCalendarClasses");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["parentProps", "day", "focusableDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
+const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
 const useUtilityClasses = classes => {
   const slots = {
@@ -40,7 +41,7 @@ const useUtilityClasses = classes => {
     weekNumberLabel: ['weekNumberLabel'],
     weekNumber: ['weekNumber']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _dayCalendarClasses.getDayCalendarUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _dayCalendarClasses.getDayCalendarUtilityClass, classes);
 };
 const weeksContainerHeight = (_dimensions.DAY_SIZE + _dimensions.DAY_MARGIN * 2) * 6;
 const PickersCalendarDayRoot = (0, _styles.styled)('div', {
@@ -143,7 +144,7 @@ function WrappedDay(_ref) {
   let {
       parentProps,
       day,
-      focusableDay,
+      focusedDay,
       selectedDays,
       isDateDisabled,
       currentMonthNumber,
@@ -164,7 +165,8 @@ function WrappedDay(_ref) {
   const {
     ownerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
-  const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
+  const isFocusableDay = focusedDay != null && utils.isSameDay(day, focusedDay);
+  const isFocusedDay = isViewFocused && isFocusableDay;
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
@@ -206,7 +208,7 @@ function WrappedDay(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, (0, _extends2.default)({}, dayProps, {
     day: day,
     disabled: isDisabled,
-    autoFocus: isViewFocused && isFocusableDay,
+    autoFocus: !outsideCurrentMonth && isFocusedDay,
     today: isToday,
     outsideCurrentMonth: outsideCurrentMonth,
     isFirstVisibleCell: isFirstVisibleCell,
@@ -257,7 +259,6 @@ function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus,
     timezone
   } = props;
   const now = (0, _useUtils.useNow)(timezone);
@@ -274,13 +275,6 @@ function DayCalendar(inProps) {
     timezone
   });
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const [internalHasFocus, setInternalHasFocus] = (0, _utils.unstable_useControlled)({
-    name: 'DayCalendar',
-    state: 'hasFocus',
-    controlled: hasFocus,
-    default: autoFocus ?? false
-  });
-  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
   const handleDaySelect = (0, _useEventCallback.default)(day => {
     if (readOnly) {
       return;
@@ -290,9 +284,7 @@ function DayCalendar(inProps) {
   const focusDay = day => {
     if (!isDateDisabled(day)) {
       onFocusedDayChange(day);
-      setInternalFocusedDay(day);
       onFocusedViewChange?.(true);
-      setInternalHasFocus(true);
     }
   };
   const handleKeyDown = (0, _useEventCallback.default)((event, day) => {
@@ -359,7 +351,7 @@ function DayCalendar(inProps) {
   });
   const handleFocus = (0, _useEventCallback.default)((event, day) => focusDay(day));
   const handleBlur = (0, _useEventCallback.default)((event, day) => {
-    if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
+    if (focusedDay != null && utils.isSameDay(focusedDay, day)) {
       onFocusedViewChange?.(false);
     }
   });
@@ -371,23 +363,6 @@ function DayCalendar(inProps) {
   const transitionKey = `${currentYearNumber}-${currentMonthNumber}`;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
-  const focusableDay = React.useMemo(() => {
-    const startOfMonth = utils.startOfMonth(currentMonth);
-    const endOfMonth = utils.endOfMonth(currentMonth);
-    if (isDateDisabled(internalFocusedDay) || utils.isAfterDay(internalFocusedDay, endOfMonth) || utils.isBeforeDay(internalFocusedDay, startOfMonth)) {
-      return (0, _dateUtils.findClosestEnabledDate)({
-        utils,
-        date: internalFocusedDay,
-        minDate: startOfMonth,
-        maxDate: endOfMonth,
-        disablePast,
-        disableFuture,
-        isDateDisabled,
-        timezone
-      });
-    }
-    return internalFocusedDay;
-  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
     const toDisplay = utils.getWeekArray(currentMonth);
     let nextMonth = utils.addMonths(currentMonth, 1);
@@ -454,14 +429,14 @@ function DayCalendar(inProps) {
             parentProps: props,
             day: day,
             selectedDays: validSelectedDays,
-            focusableDay: focusableDay,
+            isViewFocused: hasFocus,
+            focusedDay: focusedDay,
             onKeyDown: handleKeyDown,
             onFocus: handleFocus,
             onBlur: handleBlur,
             onDaySelect: handleDaySelect,
             isDateDisabled: isDateDisabled,
-            currentMonthNumber: currentMonthNumber,
-            isViewFocused: internalHasFocus
+            currentMonthNumber: currentMonthNumber
             // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
             ,
             "aria-colindex": dayIndex + 1

package/node/DateCalendar/PickersFadeTransitionGroup.js

@@ -14,10 +14,7 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersFadeTransitionGroupClasses = require("./pickersFadeTransitionGroupClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -44,9 +41,10 @@ function PickersFadeTransitionGroup(inProps) {
     children,
     className,
     reduceAnimations,
-    transKey
+    transKey,
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const theme = (0, _styles.useTheme)();
   if (reduceAnimations) {
     return children;

package/node/DateCalendar/PickersSlideTransition.js

@@ -14,11 +14,11 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _reactTransitionGroup = require("react-transition-group");
 var _pickersSlideTransitionClasses = require("./pickersSlideTransitionClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     slideDirection
   } = ownerState;
   const slots = {
@@ -107,11 +107,18 @@ function PickersSlideTransition(inProps) {
       children,
       className,
       reduceAnimations,
-      transKey
-      // extracting `classes` from `other`
+      slideDirection,
+      transKey,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    slideDirection
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = (0, _styles.useTheme)();
   if (reduceAnimations) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/DateCalendar/useCalendarState.js

@@ -6,7 +6,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCalendarState = exports.createCalendarStateReducer = void 0;
+exports.useCalendarState = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -14,13 +14,15 @@ var _useIsDateDisabled = require("./useIsDateDisabled");
 var _useUtils = require("../internals/hooks/useUtils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
-const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
+var _dateUtils = require("../internals/utils/date-utils");
+const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
   switch (action.type) {
-    case 'changeMonth':
+    case 'setVisibleDate':
       return (0, _extends2.default)({}, state, {
         slideDirection: action.direction,
-        currentMonth: action.newMonth,
-        isMonthSwitchingAnimating: !reduceAnimations
+        currentMonth: action.month,
+        isMonthSwitchingAnimating: !utils.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
+        focusedDay: action.focusedDay
       });
     case 'changeMonthTimezone':
       {
@@ -40,40 +42,27 @@ const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayF
       return (0, _extends2.default)({}, state, {
         isMonthSwitchingAnimating: false
       });
-    case 'changeFocusedDay':
-      {
-        if (state.focusedDay != null && action.focusedDay != null && utils.isSameDay(action.focusedDay, state.focusedDay)) {
-          return state;
-        }
-        const needMonthSwitch = action.focusedDay != null && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
-        return (0, _extends2.default)({}, state, {
-          focusedDay: action.focusedDay,
-          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations && !action.withoutMonthSwitchingAnimation,
-          currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
-          slideDirection: action.focusedDay != null && utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
-        });
-      }
     default:
       throw new Error('missing support');
   }
 };
-exports.createCalendarStateReducer = createCalendarStateReducer;
 const useCalendarState = params => {
   const {
     value,
     referenceDate: referenceDateProp,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus = false,
     maxDate,
     minDate,
     onMonthChange,
+    onYearChange,
     reduceAnimations,
     shouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate
   } = params;
   const utils = (0, _useUtils.useUtils)();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
   const referenceDate = React.useMemo(() => {
     return _valueManagers.singleItemValueManager.getInitialReferenceValue({
       value,
@@ -93,6 +82,14 @@ const useCalendarState = params => {
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+  const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
+    shouldDisableDate,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
+    timezone
+  });
 
   // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
   // https://github.com/mui/mui-x/issues/10804
@@ -102,54 +99,66 @@ const useCalendarState = params => {
       newTimezone: utils.getTimezone(referenceDate)
     });
   }, [referenceDate, utils]);
-  const handleChangeMonth = React.useCallback(payload => {
-    dispatch((0, _extends2.default)({
-      type: 'changeMonth'
-    }, payload));
-    if (onMonthChange) {
-      onMonthChange(payload.newMonth);
-    }
-  }, [onMonthChange]);
-  const changeMonth = React.useCallback(newDate => {
-    const newDateRequested = newDate;
-    if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
+  const setVisibleDate = (0, _useEventCallback.default)(({
+    target,
+    reason
+  }) => {
+    if (reason === 'cell-interaction' && calendarState.focusedDay != null && utils.isSameDay(target, calendarState.focusedDay)) {
       return;
     }
-    handleChangeMonth({
-      newMonth: utils.startOfMonth(newDateRequested),
-      direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
+    const skipAnimation = reason === 'cell-interaction';
+    let month;
+    let focusedDay;
+    if (reason === 'cell-interaction') {
+      month = getCurrentMonthFromVisibleDate(target, calendarState.currentMonth);
+      focusedDay = target;
+    } else {
+      month = utils.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : utils.startOfMonth(target);
+      focusedDay = target;
+
+      // If the date is disabled, we try to find a non-disabled date inside the same month.
+      if (isDateDisabled(focusedDay)) {
+        const startOfMonth = utils.startOfMonth(target);
+        const endOfMonth = utils.endOfMonth(target);
+        focusedDay = (0, _dateUtils.findClosestEnabledDate)({
+          utils,
+          date: focusedDay,
+          minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
+          maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
+          disablePast,
+          disableFuture,
+          isDateDisabled,
+          timezone
+        });
+      }
+    }
+    const hasChangedMonth = !utils.isSameMonth(calendarState.currentMonth, month);
+    const hasChangedYear = !utils.isSameYear(calendarState.currentMonth, month);
+    if (hasChangedMonth) {
+      onMonthChange?.(month);
+    }
+    if (hasChangedYear) {
+      onYearChange?.(utils.startOfYear(month));
+    }
+    dispatch({
+      type: 'setVisibleDate',
+      month,
+      direction: utils.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
+      focusedDay: calendarState.focusedDay != null && focusedDay != null && utils.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
+      skipAnimation
     });
-  }, [calendarState.currentMonth, handleChangeMonth, utils]);
-  const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    timezone
   });
   const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({
       type: 'finishMonthSwitchingAnimation'
     });
   }, []);
-  const changeFocusedDay = (0, _useEventCallback.default)((newFocusedDate, withoutMonthSwitchingAnimation) => {
-    if (!isDateDisabled(newFocusedDate)) {
-      dispatch({
-        type: 'changeFocusedDay',
-        focusedDay: newFocusedDate,
-        withoutMonthSwitchingAnimation
-      });
-    }
-  });
   return {
     referenceDate,
     calendarState,
-    changeMonth,
-    changeFocusedDay,
+    setVisibleDate,
     isDateDisabled,
-    onMonthSwitchingAnimationEnd,
-    handleChangeMonth
+    onMonthSwitchingAnimationEnd
   };
 };
 exports.useCalendarState = useCalendarState;

package/node/DateField/DateField.js

@@ -7,20 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateField = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _utils = require("@mui/utils");
 var _useDateField = require("./useDateField");
-var _hooks = require("../hooks");
-var _PickersTextField = require("../PickersTextField");
-var _convertFieldResponseIntoMuiTextFieldProps = require("../internals/utils/convertFieldResponseIntoMuiTextFieldProps");
+var _PickerFieldUI = require("../internals/components/PickerFieldUI");
+var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
+const _excluded = ["slots", "slotProps"];
 /**
  * Demos:
  *
@@ -38,33 +34,21 @@ const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function Dat
   });
   const {
       slots,
-      slotProps,
-      InputProps,
-      inputProps
+      slotProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
-  const textFieldProps = (0, _useSlotProps.default)({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref: inRef
-    },
-    ownerState
+  const textFieldProps = (0, _PickerFieldUI.useFieldTextFieldProps)({
+    slotProps,
+    ref: inRef,
+    externalForwardedProps: other
   });
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = (0, _extends2.default)({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = (0, _extends2.default)({}, InputProps, textFieldProps.InputProps);
   const fieldResponse = (0, _useDateField.useDateField)(textFieldProps);
-  const convertedFieldResponse = (0, _convertFieldResponseIntoMuiTextFieldProps.convertFieldResponseIntoMuiTextFieldProps)(fieldResponse);
-  const processedFieldProps = (0, _hooks.useClearableField)((0, _extends2.default)({}, convertedFieldResponse, {
-    slots,
-    slotProps
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, processedFieldProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+    slots: slots,
+    slotProps: slotProps,
+    fieldResponse: fieldResponse,
+    defaultOpenPickerIcon: _icons.CalendarIcon
+  });
 });
 process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -82,6 +66,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default false
    */
   clearable: _propTypes.default.bool,
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition: _propTypes.default.oneOf(['end', 'start']),
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -225,6 +215,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
   onSelectedSectionsChange: _propTypes.default.func,
+  /**
+   * The position at which the opening button is placed.
+   * If there is no picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition: _propTypes.default.oneOf(['end', 'start']),
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
@@ -274,10 +270,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: _propTypes.default.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.