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

package/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,17 +65,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  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,
@@ -88,16 +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']),
-  /**
-   * 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.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -112,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/DigitalClock/DigitalClock.js

@@ -149,6 +149,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/MonthCalendar/MonthCalendar.js

@@ -98,6 +98,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -101,6 +101,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/MultiSectionDigitalClock/MultiSectionDigitalClock.types.d.ts

@@ -5,17 +5,17 @@ import { MultiSectionDigitalClockClasses } from './multiSectionDigitalClockClass
 import { BaseClockProps, ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps } from '../internals/models/props/time';
 import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface MultiSectionDigitalClockOption<TValue> {
-    isDisabled?: (value: TValue) => boolean;
-    isSelected: (value: TValue) => boolean;
-    isFocused: (value: TValue) => boolean;
+export interface MultiSectionDigitalClockOption<TSectionValue extends number | string> {
+    isDisabled?: (value: TSectionValue) => boolean;
+    isSelected: (value: TSectionValue) => boolean;
+    isFocused: (value: TSectionValue) => boolean;
     label: string;
-    value: TValue;
+    value: TSectionValue;
     ariaLabel: string;
 }
 export interface ExportedMultiSectionDigitalClockProps extends ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps {
 }
-export interface MultiSectionDigitalClockViewProps<TValue> extends Pick<MultiSectionDigitalClockSectionProps<TValue>, 'onChange' | 'items'> {
+export interface MultiSectionDigitalClockViewProps<TSectionValue extends number | string> extends Pick<MultiSectionDigitalClockSectionProps<TSectionValue>, 'onChange' | 'items'> {
 }
 export interface MultiSectionDigitalClockSlots {
     /**

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.d.ts

@@ -8,15 +8,15 @@ export interface ExportedMultiSectionDigitalClockSectionProps {
     slots?: MultiSectionDigitalClockSlots;
     slotProps?: MultiSectionDigitalClockSlotProps;
 }
-export interface MultiSectionDigitalClockSectionProps<TValue> extends FormProps, ExportedMultiSectionDigitalClockSectionProps {
+export interface MultiSectionDigitalClockSectionProps<TSectionValue extends number | string> extends FormProps, ExportedMultiSectionDigitalClockSectionProps {
     autoFocus?: boolean;
-    items: MultiSectionDigitalClockOption<TValue>[];
-    onChange: (value: TValue) => void;
+    items: MultiSectionDigitalClockOption<TSectionValue>[];
+    onChange: (value: TSectionValue) => void;
     active?: boolean;
     skipDisabled?: boolean;
     role?: string;
 }
-type MultiSectionDigitalClockSectionComponent = <TValue>(props: MultiSectionDigitalClockSectionProps<TValue> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element & {
+type MultiSectionDigitalClockSectionComponent = <TSectionValue extends number | string>(props: MultiSectionDigitalClockSectionProps<TSectionValue> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element & {
     propTypes?: any;
 };
 /**

package/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/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -5,7 +5,7 @@ import SvgIcon from '@mui/material/SvgIcon';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from '../internals/components/PickersArrowSwitcher';
 import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks';
-import { PickerValidDate, DateView } from '../models';
+import { PickerValidDate, DateView, PickerOwnerState } from '../models';
 import { SlideDirection } from '../DateCalendar/PickersSlideTransition';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
@@ -22,10 +22,9 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
 }
 export interface PickersCalendarHeaderSlotPropsOverrides {
 }
-export type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps;
 export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps {
-    switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickersCalendarHeaderOwnerState>;
-    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, PickersCalendarHeaderOwnerState>;
+    switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickerOwnerState>;
+    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, PickerOwnerState>;
 }
 export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcherProps, MonthValidationOptions {
     /**

package/PickersLayout/PickersLayout.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { PickersLayoutProps } from './PickersLayout.types';
-import { DateOrTimeViewWithMeridiem } from '../internals/models';
+import { PickerLayoutOwnerState, PickersLayoutProps } from './PickersLayout.types';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models';
 export declare const PickersLayoutRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: PickersLayoutProps<any, any>;
+    ownerState: PickerLayoutOwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-type PickersLayoutComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    ownerState: PickerLayoutOwnerState;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+type PickersLayoutComponent = (<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/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,17 +150,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  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,
@@ -167,16 +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']),
-  /**
-   * 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.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -191,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 };

package/PickersLayout/PickersLayout.types.d.ts

@@ -4,13 +4,15 @@ import { SlotComponentProps } from '@mui/utils';
 import { PickersActionBar, PickersActionBarProps } from '../PickersActionBar';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
-import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
+import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
 import { ExportedPickersShortcutProps, PickersShortcuts } from '../PickersShortcuts/PickersShortcuts';
 import { PickerOwnerState } from '../models';
-export interface ExportedPickersLayoutSlots<TValue, TView extends DateOrTimeViewWithMeridiem> {
+import { PickerValidValue } from '../internals/models';
+import { UsePickerViewsLayoutResponse } from '../internals/hooks/usePicker/usePickerViews';
+import { UsePickerValueLayoutResponse } from '../internals/hooks/usePicker/usePickerValue.types';
+export interface ExportedPickersLayoutSlots<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
      * @default PickersActionBar
@@ -28,10 +30,12 @@ export interface ExportedPickersLayoutSlots<TValue, TView extends DateOrTimeView
     layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>>;
 }
 export interface PickerLayoutOwnerState extends PickerOwnerState {
-    wrapperVariant: WrapperVariant;
-    isLandscape: boolean;
+    /**
+     * `true` if the application is in right-to-left direction.
+     */
+    isRtl: boolean;
 }
-export interface ExportedPickersLayoutSlotProps<TValue, TView extends DateOrTimeViewWithMeridiem> {
+export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Props passed down to the action bar component.
      */
@@ -45,7 +49,7 @@ export interface ExportedPickersLayoutSlotProps<TValue, TView extends DateOrTime
      */
     layout?: Partial<PickersLayoutProps<TValue, TView>>;
 }
-export interface PickersLayoutSlots<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TValue, TView> {
+export interface PickersLayoutSlots<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TValue, TView> {
     /**
      * Tabs enabling toggling between views.
      */
@@ -56,7 +60,7 @@ export interface PickersLayoutSlots<TValue, TView extends DateOrTimeViewWithMeri
      */
     toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
 }
-export interface PickersLayoutSlotProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TValue, TView> {
+export interface PickersLayoutSlotProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TValue, TView> {
     /**
      * Props passed down to the tabs component.
      */
@@ -66,8 +70,7 @@ export interface PickersLayoutSlotProps<TValue, TView extends DateOrTimeViewWith
      */
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface PickersLayoutProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerLayoutPropsResponseLayoutProps<TValue, TView>, 'value'> {
-    value?: TValue;
+export interface PickersLayoutProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends UsePickerViewsLayoutResponse<TView>, UsePickerValueLayoutResponse<TValue> {
     className?: string;
     children?: React.ReactNode;
     /**
@@ -88,12 +91,8 @@ export interface PickersLayoutProps<TValue, TView extends DateOrTimeViewWithMeri
      * @default {}
      */
     slotProps?: PickersLayoutSlotProps<TValue, TView>;
-    /**
-     * `true` if the application is in right-to-left direction.
-     */
-    isRtl: boolean;
 }
-export interface SubComponents<TValue> {
+export interface SubComponents<TValue extends PickerValidValue> {
     toolbar: React.ReactElement<ExportedBaseToolbarProps> | null;
     content: React.ReactNode;
     tabs: React.ReactElement<ExportedBaseTabsProps> | null;

package/PickersLayout/usePickerLayout.d.ts

@@ -1,6 +1,7 @@
-import { PickersLayoutProps, SubComponents } from './PickersLayout.types';
-import { DateOrTimeViewWithMeridiem } from '../internals/models';
-interface UsePickerLayoutResponse<TValue> extends SubComponents<TValue> {
+import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './PickersLayout.types';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models';
+interface UsePickerLayoutResponse<TValue extends PickerValidValue> extends SubComponents<TValue> {
+    ownerState: PickerLayoutOwnerState;
 }
-declare const usePickerLayout: <TValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView>) => UsePickerLayoutResponse<TValue>;
+declare const usePickerLayout: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView>) => UsePickerLayoutResponse<TValue>;
 export default usePickerLayout;

package/PickersLayout/usePickerLayout.js

@@ -4,20 +4,22 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import { PickersActionBar } from "../PickersActionBar/index.js";
 import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import { PickersShortcuts } from "../PickersShortcuts/index.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
 const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape
+    pickerOrientation
   } = ownerState;
   const slots = {
-    root: ['root', isLandscape && 'landscape'],
+    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
     contentWrapper: ['contentWrapper'],
     toolbar: ['toolbar'],
     actionBar: ['actionBar'],
@@ -29,10 +31,14 @@ const useUtilityClasses = (classes, ownerState) => {
 };
 const usePickerLayout = props => {
   const {
-    ownerState: pickersOwnerState
+    ownerState: pickerOwnerState
   } = usePickerPrivateContext();
   const {
-    wrapperVariant,
+    variant,
+    orientation
+  } = usePickerContext();
+  const isRtl = useRtl();
+  const {
     onAccept,
     onClear,
     onCancel,
@@ -44,9 +50,6 @@ const usePickerLayout = props => {
     onChange,
     onSelectShortcut,
     isValid,
-    isLandscape,
-    disabled,
-    readOnly,
     children,
     slots,
     slotProps,
@@ -56,9 +59,8 @@ const usePickerLayout = props => {
     // - For pickers value: PickerValidDate | null
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const ownerState = _extends({}, pickersOwnerState, {
-    wrapperVariant,
-    isLandscape
+  const ownerState = _extends({}, pickerOwnerState, {
+    isRtl
   });
   const classes = useUtilityClasses(classesProp, ownerState);
 
@@ -72,7 +74,7 @@ const usePickerLayout = props => {
       onClear,
       onCancel,
       onSetToday,
-      actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
+      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
     ownerState
@@ -85,14 +87,13 @@ const usePickerLayout = props => {
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
     additionalProps: {
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange,
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
     ownerState
@@ -117,7 +118,8 @@ const usePickerLayout = props => {
     externalSlotProps: slotProps?.shortcuts,
     additionalProps: {
       isValid,
-      isLandscape,
+      isLandscape: orientation === 'landscape',
+      // Will be removed in a follow up PR?
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
@@ -129,7 +131,8 @@ const usePickerLayout = props => {
     content,
     tabs,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   };
 };
 export default usePickerLayout;

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ListProps } from '@mui/material/List';
-interface PickersShortcutsItemGetValueParams<TValue> {
+import { PickerValidValue } from '../internals/models';
+interface PickersShortcutsItemGetValueParams<TValue extends PickerValidValue> {
     isValid: (value: TValue) => boolean;
 }
-export interface PickersShortcutsItem<TValue> {
+export interface PickersShortcutsItem<TValue extends PickerValidValue> {
     label: string;
     getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
     /**
@@ -12,9 +13,9 @@ export interface PickersShortcutsItem<TValue> {
      */
     id?: string;
 }
-export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<unknown>, 'getValue'>;
+export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<PickerValidValue>, 'getValue'>;
 export type PickerShortcutChangeImportance = 'set' | 'accept';
-export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'onChange'> {
+export interface ExportedPickersShortcutProps<TValue extends PickerValidValue> extends Omit<ListProps, 'onChange'> {
     /**
      * Ordered array of shortcuts to display.
      * If empty, does not display the shortcuts.
@@ -29,7 +30,7 @@ export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'o
      */
     changeImportance?: PickerShortcutChangeImportance;
 }
-export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutProps<TValue> {
+export interface PickersShortcutsProps<TValue extends PickerValidValue> extends ExportedPickersShortcutProps<TValue> {
     isLandscape: boolean;
     onChange: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
@@ -43,7 +44,7 @@ export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutPr
  *
  * - [PickersShortcuts API](https://mui.com/x/api/date-pickers/pickers-shortcuts/)
  */
-declare function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;
+declare function PickersShortcuts<TValue extends PickerValidValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;
 declare namespace PickersShortcuts {
     var propTypes: any;
 }