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

package/node/MonthCalendar/{PickersMonth.js → MonthCalendarButton.js}

@@ -5,51 +5,31 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickersMonth = void 0;
+exports.MonthCalendarButton = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _pickersMonthClasses = require("./pickersMonthClasses");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _monthCalendarClasses = require("./monthCalendarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
 const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root'],
-    monthButton: ['monthButton', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
+    button: ['button', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
   };
-  return (0, _composeClasses.default)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _monthCalendarClasses.getMonthCalendarUtilityClass, classes);
 };
-const PickersMonthRoot = (0, _styles.styled)('div', {
-  name: 'MuiPickersMonth',
-  slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root]
-})({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexBasis: '33.3%',
-  variants: [{
-    props: {
-      monthsPerRow: 4
-    },
-    style: {
-      flexBasis: '25%'
-    }
-  }]
-});
-const MonthCalendarButton = (0, _styles.styled)('button', {
-  name: 'MuiPickersMonth',
-  slot: 'MonthButton',
-  overridesResolver: (_, styles) => [styles.monthButton, {
-    [`&.${_pickersMonthClasses.pickersMonthClasses.disabled}`]: styles.disabled
+const DefaultMonthButton = (0, _styles.styled)('button', {
+  name: 'MuiMonthCalendar',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${_monthCalendarClasses.monthCalendarClasses.disabled}`]: styles.disabled
   }, {
-    [`&.${_pickersMonthClasses.pickersMonthClasses.selected}`]: styles.selected
+    [`&.${_monthCalendarClasses.monthCalendarClasses.selected}`]: styles.selected
   }]
 })(({
   theme
@@ -59,7 +39,6 @@ const MonthCalendarButton = (0, _styles.styled)('button', {
   border: 0,
   outline: 0
 }, theme.typography.subtitle1, {
-  margin: '8px 0',
   height: 36,
   width: 72,
   borderRadius: 18,
@@ -74,10 +53,10 @@ const MonthCalendarButton = (0, _styles.styled)('button', {
     cursor: 'auto',
     pointerEvents: 'none'
   },
-  [`&.${_pickersMonthClasses.pickersMonthClasses.disabled}`]: {
+  [`&.${_monthCalendarClasses.monthCalendarClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.secondary
   },
-  [`&.${_pickersMonthClasses.pickersMonthClasses.selected}`]: {
+  [`&.${_monthCalendarClasses.monthCalendarClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
@@ -89,29 +68,17 @@ const MonthCalendarButton = (0, _styles.styled)('button', {
 /**
  * @ignore - do not document.
  */
-const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
-  const props = (0, _styles.useThemeProps)({
-    props: inProps,
-    name: 'MuiPickersMonth'
-  });
+const MonthCalendarButton = exports.MonthCalendarButton = /*#__PURE__*/React.memo(function MonthCalendarButton(props) {
   const {
       autoFocus,
-      className,
       classes: classesProp,
-      children,
-      disabled = false,
-      selected = false,
+      disabled,
+      selected,
       value,
-      tabIndex,
       onClick,
       onKeyDown,
       onFocus,
       onBlur,
-      'aria-current': ariaCurrent,
-      'aria-label': ariaLabel
-      // We don't want to forward this prop to the root element
-      ,
-
       slots,
       slotProps
     } = props,
@@ -133,32 +100,24 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
       ref.current?.focus();
     }
   }, [autoFocus]);
-  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const MonthButton = slots?.monthButton ?? DefaultMonthButton;
   const monthButtonProps = (0, _useSlotProps.default)({
     elementType: MonthButton,
     externalSlotProps: slotProps?.monthButton,
+    externalForwardedProps: other,
     additionalProps: {
-      children,
       disabled,
-      tabIndex,
       ref,
       type: 'button',
       role: 'radio',
-      'aria-current': ariaCurrent,
       'aria-checked': selected,
-      'aria-label': ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
     ownerState,
-    className: classes.monthButton
+    className: classes.button
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps))
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps));
 });

package/node/MonthCalendar/index.js

@@ -21,12 +21,5 @@ Object.defineProperty(exports, "monthCalendarClasses", {
     return _monthCalendarClasses.monthCalendarClasses;
   }
 });
-Object.defineProperty(exports, "pickersMonthClasses", {
-  enumerable: true,
-  get: function () {
-    return _pickersMonthClasses.pickersMonthClasses;
-  }
-});
 var _MonthCalendar = require("./MonthCalendar");
-var _monthCalendarClasses = require("./monthCalendarClasses");
-var _pickersMonthClasses = require("./pickersMonthClasses");
+var _monthCalendarClasses = require("./monthCalendarClasses");

package/node/MonthCalendar/monthCalendarClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getMonthCalendarUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiMonthCalendar', slot);
 }
-const monthCalendarClasses = exports.monthCalendarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMonthCalendar', ['root']);
+const monthCalendarClasses = exports.monthCalendarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMonthCalendar', ['root', 'button', 'disabled', 'selected']);

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -29,12 +29,10 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
 var _dateUtils = require("../internals/utils/date-utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "skipDisabled", "timezone"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -93,6 +91,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
       focusedView: inFocusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       skipDisabled = false,
@@ -108,6 +107,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
@@ -196,6 +196,9 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         {
           const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(rawValue, meridiemMode, ampm);
           const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+            return true;
+          }
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
@@ -325,8 +328,10 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
       });
     }, {});
   }, [views, buildViewProps]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiSectionDigitalClockRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.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;
@@ -18,12 +19,10 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
 var _dimensions = require("../internals/constants/dimensions");
 var _utils = require("../internals/utils/utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     item: ['item']
@@ -63,7 +62,7 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   },
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -115,6 +114,7 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       autoFocus,
       onChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       items,
@@ -124,10 +124,13 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       skipDisabled
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = React.useMemo(() => (0, _extends2.default)({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
   React.useEffect(() => {
     if (containerRef.current === null) {

package/node/PickersActionBar/PickersActionBar.js

@@ -6,16 +6,24 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickersActionBar = PickersActionBar;
+exports.PickersActionBar = 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 _styles = require("@mui/material/styles");
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
+const _excluded = ["actions"];
+const PickersActionBarRoot = (0, _styles.styled)(_DialogActions.default, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -26,16 +34,18 @@ const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-function PickersActionBar(props) {
+function PickersActionBarComponent(props) {
   const {
-      onAccept,
-      onClear,
-      onCancel,
-      onSetToday,
       actions
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const {
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  } = (0, _hooks.usePickerActionsContext)();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -43,33 +53,33 @@ function PickersActionBar(props) {
     switch (actionType) {
       case 'clear':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onClear,
+          onClick: clearValue,
           children: translations.clearButtonLabel
         }, actionType);
       case 'cancel':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onCancel,
+          onClick: cancelValueChanges,
           children: translations.cancelButtonLabel
         }, actionType);
       case 'accept':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onAccept,
+          onClick: acceptValueChanges,
           children: translations.okButtonLabel
         }, actionType);
       case 'today':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onSetToday,
+          onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
       default:
         return null;
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogActions.default, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersActionBarRoot, (0, _extends2.default)({}, other, {
     children: buttons
   }));
 }
-process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
+process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -77,7 +87,9 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
   /**
    * Ordered array of actions to display.
    * If empty, does not display that action bar.
-   * @default `['cancel', 'accept']` for mobile and `[]` for desktop
+   * @default
+   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
+   * - `['cancel', 'accept']` for all other Pickers
    */
   actions: _propTypes.default.arrayOf(_propTypes.default.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
   /**
@@ -85,12 +97,9 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
    * @default false
    */
   disableSpacing: _propTypes.default.bool,
-  onAccept: _propTypes.default.func.isRequired,
-  onCancel: _propTypes.default.func.isRequired,
-  onClear: _propTypes.default.func.isRequired,
-  onSetToday: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-} : void 0;
+} : void 0;
+const PickersActionBar = exports.PickersActionBar = /*#__PURE__*/React.memo(PickersActionBarComponent);

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -24,13 +24,11 @@ var _icons = require("../icons");
 var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitcher");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _pickersCalendarHeaderClasses = require("./pickersCalendarHeaderClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     labelContainer: ['labelContainer'],
@@ -139,12 +137,15 @@ const PickersCalendarHeader = exports.PickersCalendarHeader = /*#__PURE__*/React
       views,
       labelId,
       className,
+      classes: classesProp,
       timezone,
       format = `${utils.formats.month} ${utils.formats.year}`
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = (0, _useSlotProps2.default)({
     elementType: SwitchViewButton,
@@ -221,6 +222,8 @@ const PickersCalendarHeader = exports.PickersCalendarHeader = /*#__PURE__*/React
       }))]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, {
       in: view === 'day',
+      appear: !reduceAnimations,
+      enter: !reduceAnimations,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersArrowSwitcher.PickersArrowSwitcher, {
         slots: slots,
         slotProps: slotProps,

package/node/PickersLayout/PickersLayout.js

@@ -14,14 +14,14 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersLayoutClasses = require("./pickersLayoutClasses");
 var _usePickerLayout = _interopRequireDefault(require("./usePickerLayout"));
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("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 (0, _composeClasses.default)(slots, _pickersLayoutClasses.getPickersLayoutUtilityClass, classes);
@@ -40,7 +40,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
@@ -54,8 +54,8 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      isLandscape: true,
-      isRtl: true
+      pickerOrientation: 'landscape',
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
@@ -64,7 +64,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
@@ -78,8 +78,8 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     }
   }, {
     props: {
-      isLandscape: false,
-      isRtl: true
+      pickerOrientation: 'portrait',
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
@@ -117,23 +117,28 @@ const PickersLayout = exports.PickersLayout = /*#__PURE__*/React.forwardRef(func
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = (0, _usePickerLayout.default)(props);
+  const {
+    orientation,
+    variant
+  } = (0, _usePickerContext.usePickerContext)();
   const {
     sx,
     className,
-    isLandscape,
-    wrapperVariant
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: props,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
+    ownerState: ownerState,
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
-      children: wrapperVariant === 'desktop' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      ownerState: ownerState,
+      children: variant === 'desktop' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [content, tabs]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [tabs, content]
@@ -152,38 +157,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
-  isLandscape: _propTypes.default.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: _propTypes.default.bool.isRequired,
-  isValid: _propTypes.default.func.isRequired,
-  onAccept: _propTypes.default.func.isRequired,
-  onCancel: _propTypes.default.func.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  onClear: _propTypes.default.func.isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  onDismiss: _propTypes.default.func.isRequired,
-  onOpen: _propTypes.default.func.isRequired,
-  onSelectShortcut: _propTypes.default.func.isRequired,
-  onSetToday: _propTypes.default.func.isRequired,
-  onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -197,9 +170,5 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  value: _propTypes.default.any,
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: _propTypes.default.oneOf(['desktop', 'mobile'])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;