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

package/models/fields.d.ts

@@ -4,7 +4,8 @@ import type { ExportedUseClearableFieldProps, UseClearableFieldResponse } from '
 import { ExportedPickersSectionListProps } from '../PickersSectionList';
 import type { UseFieldInternalProps, UseFieldResponse } from '../internals/hooks/useField';
 import type { PickersTextFieldProps } from '../PickersTextField';
-import { BaseForwardedSingleInputFieldProps } from '../internals/models';
+import { BaseForwardedSingleInputFieldProps, FieldRangeSection, PickerRangeValue, PickerValidValue } from '../internals/models';
+import { PickerOwnerState } from './pickers';
 export type FieldSectionType = 'year' | 'month' | 'day' | 'weekDay' | 'hours' | 'minutes' | 'seconds' | 'meridiem' | 'empty';
 export type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
 export interface FieldSection {
@@ -69,12 +70,14 @@ export interface FieldSection {
      */
     endSeparator: string;
 }
-export interface FieldRef<TSection extends FieldSection> {
+type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
+export type InferFieldSection<TValue extends PickerValidValue> = IsAny<TValue> extends true ? FieldSection : TValue extends PickerRangeValue ? FieldRangeSection : FieldSection;
+export interface FieldRef<TValue extends PickerValidValue> {
     /**
      * Returns the sections of the current value.
-     * @returns {TSection[]} The sections of the current value.
+     * @returns {InferFieldSection<TValue>[]} The sections of the current value.
      */
-    getSections: () => TSection[];
+    getSections: () => InferFieldSection<TValue>[];
     /**
      * Returns the index of the active section (the first focused section).
      * If no section is active, returns `null`.
@@ -98,10 +101,20 @@ export interface FieldRef<TSection extends FieldSection> {
     isFieldFocused: () => boolean;
 }
 export type FieldSelectedSections = number | FieldSectionType | null | 'all';
+export interface FieldOwnerState extends PickerOwnerState {
+    /**
+     * `true` if the field is disabled, `false` otherwise.
+     */
+    isFieldDisabled: boolean;
+    /**
+     * `true` if the field is read-only, `false` otherwise.
+     */
+    isFieldReadOnly: boolean;
+}
 /**
  * Props the prop `slotProps.field` of a picker can receive.
  */
-export type PickerFieldSlotProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean> = ExportedUseClearableFieldProps & Pick<UseFieldInternalProps<TValue, TSection, TEnableAccessibleFieldDOMStructure, unknown>, 'shouldRespectLeadingZeros' | 'readOnly'> & React.HTMLAttributes<HTMLDivElement> & {
+export type PickerFieldSlotProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean> = ExportedUseClearableFieldProps & Pick<UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, unknown>, 'shouldRespectLeadingZeros' | 'readOnly'> & React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
@@ -113,3 +126,4 @@ export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStruct
  * Props the built-in text field component can receive.
  */
 export type BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> : Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
+export {};

package/models/validation.d.ts

@@ -1,3 +1,4 @@
+import type { PickerValidValue } from '../internals/models';
 /**
  * Validation error types applicable to both date and time validation
  */
@@ -5,7 +6,7 @@ type CommonDateTimeValidationError = 'invalidDate' | 'disableFuture' | 'disableP
 export type DateValidationError = CommonDateTimeValidationError | 'shouldDisableDate' | 'shouldDisableMonth' | 'shouldDisableYear' | 'minDate' | 'maxDate';
 export type TimeValidationError = CommonDateTimeValidationError | 'minutesStep' | 'minTime' | 'maxTime' | 'shouldDisableTime-hours' | 'shouldDisableTime-minutes' | 'shouldDisableTime-seconds';
 export type DateTimeValidationError = DateValidationError | TimeValidationError;
-export interface OnErrorProps<TValue, TError> {
+export interface OnErrorProps<TValue extends PickerValidValue, TError> {
     /**
      * Callback fired when the error associated with the current value changes.
      * When a validation error is detected, the `error` parameter contains a non-null value.

package/modern/AdapterMoment/AdapterMoment.js

@@ -430,12 +430,22 @@ export class AdapterMoment {
       const end = this.endOfWeek(this.endOfMonth(value));
       let count = 0;
       let current = start;
+      let currentDayOfYear = current.get('dayOfYear');
       const nestedWeeks = [];
       while (current.isBefore(end)) {
         const weekNumber = Math.floor(count / 7);
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
         nestedWeeks[weekNumber].push(current);
+        const prevDayOfYear = currentDayOfYear;
         current = this.addDays(current, 1);
+        currentDayOfYear = current.get('dayOfYear');
+
+        // If there is a TZ change at midnight, adding 1 day may only increase the date by 23 hours to 11pm
+        // To fix, bump the date into the next day (add 12 hours) and then revert to the start of the day
+        // See https://github.com/moment/moment/issues/4743#issuecomment-811306874 for context.
+        if (prevDayOfYear === currentDayOfYear) {
+          current = current.add(12, 'h').startOf('day');
+        }
         count += 1;
       }
       return nestedWeeks;

package/modern/DateCalendar/PickersFadeTransitionGroup.js

@@ -6,10 +6,7 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getPickersFadeTransitionGroupUtilityClass } from "./pickersFadeTransitionGroupClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -36,9 +33,10 @@ export function PickersFadeTransitionGroup(inProps) {
     children,
     className,
     reduceAnimations,
-    transKey
+    transKey,
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const theme = useTheme();
   if (reduceAnimations) {
     return children;

package/modern/DateCalendar/PickersSlideTransition.js

@@ -7,10 +7,10 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     slideDirection
   } = ownerState;
   const slots = {
@@ -99,11 +99,18 @@ export function PickersSlideTransition(inProps) {
       children,
       className,
       reduceAnimations,
-      transKey
-      // extracting `classes` from `other`
+      slideDirection,
+      transKey,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    slideDirection
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {

package/modern/DateField/DateField.js

@@ -13,6 +13,7 @@ import { useDateField } from "./useDateField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -267,10 +268,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: PropTypes.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, '')`.

package/modern/DateTimeField/DateTimeField.js

@@ -13,6 +13,7 @@ import { useDateTimeField } from "./useDateTimeField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -307,10 +308,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   shouldDisableYear: PropTypes.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, '')`.

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -11,6 +11,7 @@ import { TimeIcon, DateRangeIcon } from "../icons/index.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { getDateTimePickerTabsUtilityClass } from "./dateTimePickerTabsClasses.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = view => {
   if (isDatePickerView(view)) {
@@ -24,10 +25,7 @@ const tabToView = tab => {
   }
   return 'hours';
 };
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -72,10 +70,14 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
+    classes: classesProp,
     sx
   } = props;
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
   };
@@ -83,7 +85,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     return null;
   }
   return /*#__PURE__*/_jsxs(DateTimePickerTabsRoot, {
-    ownerState: props,
+    ownerState: ownerState,
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,

package/modern/DayCalendarSkeleton/DayCalendarSkeleton.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,10 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { getDayCalendarSkeletonUtilityClass } from "./dayCalendarSkeletonClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     week: ['week'],
@@ -45,14 +42,9 @@ const DayCalendarSkeletonDay = styled(Skeleton, {
   overridesResolver: (props, styles) => styles.daySkeleton
 })({
   margin: `0 ${DAY_MARGIN}px`,
-  variants: [{
-    props: {
-      day: 0
-    },
-    style: {
-      visibility: 'hidden'
-    }
-  }]
+  '&[data-day-in-month="0"]': {
+    visibility: 'hidden'
+  }
 });
 const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
 
@@ -71,23 +63,22 @@ function DayCalendarSkeleton(inProps) {
     name: 'MuiDayCalendarSkeleton'
   });
   const {
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(other);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(DayCalendarSkeletonRoot, _extends({
     className: clsx(classes.root, className)
   }, other, {
     children: monthMap.map((week, index) => /*#__PURE__*/_jsx(DayCalendarSkeletonWeek, {
       className: classes.week,
-      children: week.map((day, index2) => /*#__PURE__*/_jsx(DayCalendarSkeletonDay, {
+      children: week.map((dayInMonth, index2) => /*#__PURE__*/_jsx(DayCalendarSkeletonDay, {
         variant: "circular",
         width: DAY_SIZE,
         height: DAY_SIZE,
         className: classes.daySkeleton,
-        ownerState: {
-          day
-        }
+        "data-day-in-month": dayInMonth
       }, index2))
     }, index))
   }));

package/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,33 +1,31 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
 import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from "../PickersLayout/index.js";
+import { usePickerContext } from "../hooks/usePickerContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
-  const isRtl = useRtl();
   const {
     toolbar,
     tabs,
     content,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = usePickerLayout(props);
+  const {
+    orientation
+  } = usePickerContext();
   const {
     sx,
     className,
-    isLandscape,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
-  const ownerState = _extends({}, props, {
-    isRtl
-  });
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     className: clsx(pickersLayoutClasses.root, classes?.root, className),
@@ -41,8 +39,9 @@ const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function Deskt
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
     ownerState: ownerState,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
       className: clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
+      ownerState: ownerState,
       sx: {
         display: 'grid'
       },
@@ -66,11 +65,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isLandscape: PropTypes.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
@@ -82,10 +76,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   onSelectShortcut: PropTypes.func.isRequired,
   onSetToday: PropTypes.func.isRequired,
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -100,9 +90,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    * 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,
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;
 export { DesktopDateTimePickerLayout };

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -19,11 +19,9 @@ import { ArrowDropDownIcon } from "../icons/index.js";
 import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
 import { usePreviousMonthDisabled, useNextMonthDisabled } from "../internals/hooks/date-helpers-hooks.js";
 import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     labelContainer: ['labelContainer'],
@@ -132,12 +130,15 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       views,
       labelId,
       className,
+      classes: classesProp,
       timezone,
       format = `${utils.formats.month} ${utils.formats.year}`
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,

package/modern/PickersLayout/PickersLayout.js

@@ -7,14 +7,14 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { pickersLayoutClasses, getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import usePickerLayout from "./usePickerLayout.js";
+import { usePickerContext } from "../hooks/usePickerContext.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape,
-    classes
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper']
   };
   return composeClasses(slots, getPickersLayoutUtilityClass, classes);
@@ -33,7 +33,7 @@ export const PickersLayoutRoot = styled('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -47,7 +47,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       isRtl: true
     },
     style: {
@@ -57,7 +57,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -71,7 +71,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: false,
+      pickerOrientation: 'portrait',
       isRtl: true
     },
     style: {
@@ -110,23 +110,28 @@ const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inPro
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = usePickerLayout(props);
+  const {
+    orientation,
+    variant
+  } = usePickerContext();
   const {
     sx,
     className,
-    isLandscape,
-    wrapperVariant
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: clsx(classes.root, className),
-    ownerState: props,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
+    ownerState: ownerState,
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
-      children: wrapperVariant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
+      ownerState: ownerState,
+      children: variant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
         children: [content, tabs]
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [tabs, content]
@@ -145,11 +150,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isLandscape: PropTypes.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
@@ -161,10 +161,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   onSelectShortcut: PropTypes.func.isRequired,
   onSetToday: PropTypes.func.isRequired,
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -179,9 +175,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * 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,
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;
 export { PickersLayout };