@mui/x-date-pickers 8.0.0-alpha.10 → 8.0.0-alpha.12

package/modern/DateCalendar/DateCalendar.js

@@ -96,7 +96,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       disableFuture,
       disablePast,
       onChange,
-      onYearChange,
       onMonthChange,
       reduceAnimations,
       shouldDisableDate,
@@ -112,7 +111,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       minDate,
       maxDate,
       disableHighlightToday,
-      focusedView: inFocusedView,
+      focusedView: focusedViewProp,
       onFocusedViewChange,
       showDaysOutsideCurrentMonth,
       fixedWeekNumber,
@@ -155,15 +154,13 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     onChange: handleValueChange,
     onViewChange,
     autoFocus,
-    focusedView: inFocusedView,
+    focusedView: focusedViewProp,
     onFocusedViewChange
   });
   const {
     referenceDate,
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     isDateDisabled,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
@@ -176,7 +173,13 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     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
@@ -193,9 +196,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       view,
       currentMonth: calendarState.currentMonth,
       onViewChange: setView,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate: minDateWithDisabled,
       maxDate: maxDateWithDisabled,
@@ -223,12 +226,17 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }) : 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 = useEventCallback(newDate => {
     const startOfYear = utils.startOfYear(newDate);
@@ -245,12 +253,17 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }) : 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 = useEventCallback(day => {
     if (day) {
@@ -261,7 +274,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   });
   React.useEffect(() => {
     if (utils.isValid(value)) {
-      changeMonth(value);
+      setVisibleDate({
+        target: value,
+        reason: 'controlled-value-change'
+      });
     }
   }, [value]); // eslint-disable-line
 
@@ -328,7 +344,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: selectedDays,
           onSelectedDaysChange: handleSelectedDayChange,

package/modern/DateCalendar/DateCalendar.types.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { SlotComponentProps } from '@mui/utils';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from "../PickersCalendarHeader/index.js";
+import { DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from "./DayCalendar.js";
+import { DateCalendarClasses } from "./dateCalendarClasses.js";
+import { BaseDateValidationProps } from "../internals/models/validation.js";
+import { ExportedUseViewsOptions } from "../internals/hooks/useViews.js";
+import { DateView, PickerOwnerState, PickerValidDate, TimezoneProps } from "../models/index.js";
+import { ExportedYearCalendarProps, YearCalendarSlots, YearCalendarSlotProps } from "../YearCalendar/YearCalendar.types.js";
+import { ExportedMonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps } from "../MonthCalendar/MonthCalendar.types.js";
+import { ExportedValidateDateProps } from "../validation/validateDate.js";
+import { FormProps } from "../internals/models/formProps.js";
+import { PickerValue } from "../internals/models/index.js";
+export interface DateCalendarSlots extends PickersCalendarHeaderSlots, DayCalendarSlots, MonthCalendarSlots, YearCalendarSlots {
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<PickersCalendarHeaderProps>;
+}
+export interface DateCalendarSlotProps extends PickersCalendarHeaderSlotProps, DayCalendarSlotProps, MonthCalendarSlotProps, YearCalendarSlotProps {
+  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, PickerOwnerState>;
+}
+export interface ExportedDateCalendarProps extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, ExportedValidateDateProps, TimezoneProps, FormProps {
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Component displaying when passed `loading` true.
+   * @returns {React.ReactNode} The node to render when loading.
+   * @default () => <span>...</span>
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Callback fired on year change.
+   * @param {PickerValidDate} year The new year.
+   */
+  onYearChange?: (year: PickerValidDate) => void;
+  /**
+   * Callback fired on month change.
+   * @param {PickerValidDate} month The new month.
+   */
+  onMonthChange?: (month: PickerValidDate) => void;
+}
+export interface DateCalendarProps extends ExportedDateCalendarProps, ExportedUseViewsOptions<PickerValue, DateView> {
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerValidDate | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerValidDate | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate?: PickerValidDate;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateCalendarClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateCalendarSlotProps;
+}
+export type DateCalendarDefaultizedProps = DefaultizedProps<DateCalendarProps, 'views' | 'openTo' | 'loading' | 'reduceAnimations' | 'renderLoading' | keyof BaseDateValidationProps>;

package/modern/DateCalendar/DayCalendar.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { DefaultizedProps, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersDayProps, ExportedPickersDayProps } from "../PickersDay/PickersDay.js";
+import { PickerOnChangeFn } from "../internals/hooks/useViews.js";
+import { SlideDirection, SlideTransitionProps } from "./PickersSlideTransition.js";
+import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from "../internals/models/validation.js";
+import { DayCalendarClasses } from "./dayCalendarClasses.js";
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from "../models/index.js";
+import { FormProps } from "../internals/models/formProps.js";
+export interface DayCalendarSlots {
+  /**
+   * Custom component for day.
+   * Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component.
+   * @default PickersDay
+   */
+  day?: React.ElementType<PickersDayProps>;
+}
+export interface DayCalendarSlotProps {
+  day?: SlotComponentPropsFromProps<PickersDayProps, {}, PickerDayOwnerState>;
+}
+export interface PickerDayOwnerState extends PickerOwnerState {
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  day: PickerValidDate;
+}
+export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @returns {React.ReactNode} The node to render when loading.
+   * @default () => "..."
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
+   * @returns {string} The name to display.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   */
+  dayOfWeekFormatter?: (date: PickerValidDate) => string;
+  /**
+   * If `true`, the week number will be display in the calendar.
+   */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+}
+export interface DayCalendarProps extends ExportedDayCalendarProps, DayValidationProps, MonthValidationProps, YearValidationProps, Required<BaseDateValidationProps>, DefaultizedProps<TimezoneProps, 'timezone'>, FormProps {
+  className?: string;
+  currentMonth: PickerValidDate;
+  selectedDays: (PickerValidDate | null)[];
+  onSelectedDaysChange: PickerOnChangeFn;
+  focusedDay: PickerValidDate | null;
+  isMonthSwitchingAnimating: boolean;
+  onFocusedDayChange: (newFocusedDay: PickerValidDate) => void;
+  onMonthSwitchingAnimationEnd: () => void;
+  reduceAnimations: boolean;
+  slideDirection: SlideDirection;
+  TransitionProps?: Partial<SlideTransitionProps>;
+  hasFocus: boolean;
+  onFocusedViewChange?: (newHasFocus: boolean) => void;
+  gridLabelId?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DayCalendarClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DayCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DayCalendarSlotProps;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare function DayCalendar(inProps: DayCalendarProps): React.JSX.Element;

package/modern/DateCalendar/DayCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["parentProps", "day", "focusableDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
+const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersDay } from "../PickersDay/PickersDay.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
@@ -137,7 +137,7 @@ function WrappedDay(_ref) {
   let {
       parentProps,
       day,
-      focusableDay,
+      focusedDay,
       selectedDays,
       isDateDisabled,
       currentMonthNumber,
@@ -158,7 +158,8 @@ function WrappedDay(_ref) {
   const {
     ownerState
   } = 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]);
@@ -200,7 +201,7 @@ function WrappedDay(_ref) {
   return /*#__PURE__*/_jsx(Day, _extends({}, dayProps, {
     day: day,
     disabled: isDisabled,
-    autoFocus: isViewFocused && isFocusableDay,
+    autoFocus: !outsideCurrentMonth && isFocusedDay,
     today: isToday,
     outsideCurrentMonth: outsideCurrentMonth,
     isFirstVisibleCell: isFirstVisibleCell,
@@ -251,7 +252,6 @@ export function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus,
     timezone
   } = props;
   const now = useNow(timezone);
@@ -268,13 +268,6 @@ export function DayCalendar(inProps) {
     timezone
   });
   const translations = usePickerTranslations();
-  const [internalHasFocus, setInternalHasFocus] = useControlled({
-    name: 'DayCalendar',
-    state: 'hasFocus',
-    controlled: hasFocus,
-    default: autoFocus ?? false
-  });
-  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
   const handleDaySelect = useEventCallback(day => {
     if (readOnly) {
       return;
@@ -284,9 +277,7 @@ export function DayCalendar(inProps) {
   const focusDay = day => {
     if (!isDateDisabled(day)) {
       onFocusedDayChange(day);
-      setInternalFocusedDay(day);
       onFocusedViewChange?.(true);
-      setInternalHasFocus(true);
     }
   };
   const handleKeyDown = useEventCallback((event, day) => {
@@ -353,7 +344,7 @@ export function DayCalendar(inProps) {
   });
   const handleFocus = useEventCallback((event, day) => focusDay(day));
   const handleBlur = useEventCallback((event, day) => {
-    if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
+    if (focusedDay != null && utils.isSameDay(focusedDay, day)) {
       onFocusedViewChange?.(false);
     }
   });
@@ -365,23 +356,6 @@ export 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 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);
@@ -448,14 +422,14 @@ export 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/modern/DateCalendar/PickersFadeTransitionGroup.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
+export interface PickersFadeTransitionGroupProps {
+  children: React.ReactElement<any>;
+  className?: string;
+  reduceAnimations: boolean;
+  transKey: React.Key;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersFadeTransitionGroupClasses>;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps): React.JSX.Element;

package/modern/DateCalendar/PickersSlideTransition.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { PickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+export type SlideDirection = 'right' | 'left';
+export interface ExportedSlideTransitionProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersSlideTransitionClasses>;
+}
+export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'>, ExportedSlideTransitionProps {
+  children: React.ReactElement<any>;
+  className?: string;
+  reduceAnimations: boolean;
+  slideDirection: SlideDirection;
+  transKey: React.Key;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare function PickersSlideTransition(inProps: SlideTransitionProps): React.JSX.Element;

package/modern/DateCalendar/dateCalendarClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DateCalendarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the transition group element. */
+  viewTransitionContainer: string;
+}
+export type DateCalendarClassKey = keyof DateCalendarClasses;
+export declare const getDateCalendarUtilityClass: (slot: string) => string;
+export declare const dateCalendarClasses: DateCalendarClasses;

package/modern/DateCalendar/dayCalendarClasses.d.ts

@@ -0,0 +1,23 @@
+export interface DayCalendarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the header element. */
+  header: string;
+  /** Styles applied to the week day label element. */
+  weekDayLabel: string;
+  /** Styles applied to the loading container element. */
+  loadingContainer: string;
+  /** Styles applied to the slide transition element. */
+  slideTransition: string;
+  /** Styles applied to the month container element. */
+  monthContainer: string;
+  /** Styles applied to the week container element. */
+  weekContainer: string;
+  /** Styles applied to the week number header */
+  weekNumberLabel: string;
+  /** Styles applied to the week number element */
+  weekNumber: string;
+}
+export type DayCalendarClassKey = keyof DayCalendarClasses;
+export declare const getDayCalendarUtilityClass: (slot: string) => string;
+export declare const dayCalendarClasses: DayCalendarClasses;

package/modern/DateCalendar/index.d.ts

@@ -0,0 +1,13 @@
+export { DateCalendar } from "./DateCalendar.js";
+export type { DateCalendarProps, DateCalendarSlots, DateCalendarSlotProps } from './DateCalendar.types';
+export type { PickerDayOwnerState } from './DayCalendar';
+export { getDateCalendarUtilityClass, dateCalendarClasses } from "./dateCalendarClasses.js";
+export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';
+export { dayCalendarClasses } from "./dayCalendarClasses.js";
+export type { DayCalendarClassKey, DayCalendarClasses } from './dayCalendarClasses';
+export type { PickersFadeTransitionGroupProps } from './PickersFadeTransitionGroup';
+export { pickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
+export type { PickersFadeTransitionGroupClassKey, PickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
+export { pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+export type { PickersSlideTransitionClassKey, PickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export type { ExportedSlideTransitionProps } from './PickersSlideTransition';

package/modern/DateCalendar/pickersFadeTransitionGroupClasses.d.ts

@@ -0,0 +1,7 @@
+export interface PickersFadeTransitionGroupClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type PickersFadeTransitionGroupClassKey = keyof PickersFadeTransitionGroupClasses;
+export declare const getPickersFadeTransitionGroupUtilityClass: (slot: string) => string;
+export declare const pickersFadeTransitionGroupClasses: PickersFadeTransitionGroupClasses;

package/modern/DateCalendar/pickersSlideTransitionClasses.d.ts

@@ -0,0 +1,19 @@
+export interface PickersSlideTransitionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to content element sliding in from left. */
+  'slideEnter-left': string;
+  /** Styles applied to content element sliding in from right. */
+  'slideEnter-right': string;
+  /** Styles applied to the element entering (transitioning into) the container. */
+  slideEnterActive: string;
+  /** Styles applied to the element leaving (transitioning out of) the container. */
+  slideExit: string;
+  /** Styles applied to the element on the left leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-left': string;
+  /** Styles applied to the element on the right leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-right': string;
+}
+export type PickersSlideTransitionClassKey = keyof PickersSlideTransitionClasses;
+export declare const getPickersSlideTransitionUtilityClass: (slot: string) => string;
+export declare const pickersSlideTransitionClasses: PickersSlideTransitionClasses;

package/modern/DateCalendar/useCalendarState.d.ts

@@ -0,0 +1,27 @@
+import { SlideDirection } from "./PickersSlideTransition.js";
+import { PickersTimezone, PickerValidDate } from "../models/index.js";
+import { DateCalendarDefaultizedProps } from "./DateCalendar.types.js";
+interface CalendarState {
+  currentMonth: PickerValidDate;
+  focusedDay: PickerValidDate | null;
+  isMonthSwitchingAnimating: boolean;
+  slideDirection: SlideDirection;
+}
+interface UseCalendarStateParameters extends Pick<DateCalendarDefaultizedProps, 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'onYearChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+  value: PickerValidDate | null;
+  timezone: PickersTimezone;
+  getCurrentMonthFromVisibleDate: (focusedDay: PickerValidDate, prevMonth: PickerValidDate) => PickerValidDate;
+}
+interface UseCalendarStateReturnValue {
+  referenceDate: PickerValidDate;
+  calendarState: CalendarState;
+  setVisibleDate: (parameters: SetVisibleDateParameters) => void;
+  isDateDisabled: (day: PickerValidDate | null) => boolean;
+  onMonthSwitchingAnimationEnd: () => void;
+}
+export declare const useCalendarState: (params: UseCalendarStateParameters) => UseCalendarStateReturnValue;
+interface SetVisibleDateParameters {
+  target: PickerValidDate;
+  reason: 'header-navigation' | 'cell-interaction' | 'controlled-value-change';
+}
+export {};