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

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
@@ -11,11 +13,9 @@ import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
 import { getFocusedListItemIndex } from "../internals/utils/utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     item: ['item']
@@ -55,7 +55,7 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   },
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -107,6 +107,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       autoFocus,
       onChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       items,
@@ -116,10 +117,13 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       skipDisabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = React.useMemo(() => _extends({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
   React.useEffect(() => {
     if (containerRef.current === null) {

package/PickersActionBar/PickersActionBar.d.ts

@@ -5,13 +5,11 @@ export interface PickersActionBarProps extends DialogActionsProps {
     /**
      * 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?: PickersActionBarAction[];
-    onAccept: () => void;
-    onClear: () => void;
-    onCancel: () => void;
-    onSetToday: () => void;
 }
 /**
  * Demos:
@@ -23,8 +21,9 @@ export interface PickersActionBarProps extends DialogActionsProps {
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-declare function PickersActionBar(props: PickersActionBarProps): React.JSX.Element | null;
-declare namespace PickersActionBar {
+declare function PickersActionBarComponent(props: PickersActionBarProps): React.JSX.Element | null;
+declare namespace PickersActionBarComponent {
     var propTypes: any;
 }
+declare const PickersActionBar: React.MemoExoticComponent<typeof PickersActionBarComponent>;
 export { PickersActionBar };

package/PickersActionBar/PickersActionBar.js

@@ -2,13 +2,21 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
+const _excluded = ["actions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
+import { usePickerActionsContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersActionBarRoot = styled(DialogActions, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -19,16 +27,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [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 = _objectWithoutPropertiesLoose(props, _excluded);
   const translations = usePickerTranslations();
+  const {
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  } = usePickerActionsContext();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -36,33 +46,33 @@ function PickersActionBar(props) {
     switch (actionType) {
       case 'clear':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onClear,
+          onClick: clearValue,
           children: translations.clearButtonLabel
         }, actionType);
       case 'cancel':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onCancel,
+          onClick: cancelValueChanges,
           children: translations.cancelButtonLabel
         }, actionType);
       case 'accept':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onAccept,
+          onClick: acceptValueChanges,
           children: translations.okButtonLabel
         }, actionType);
       case 'today':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onSetToday,
+          onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
       default:
         return null;
     }
   });
-  return /*#__PURE__*/_jsx(DialogActions, _extends({}, other, {
+  return /*#__PURE__*/_jsx(PickersActionBarRoot, _extends({}, 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"  |
@@ -70,7 +80,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.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
   /**
@@ -78,13 +90,10 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
    * @default false
    */
   disableSpacing: PropTypes.bool,
-  onAccept: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onSetToday: PropTypes.func.isRequired,
   /**
    * 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])
 } : void 0;
+const PickersActionBar = /*#__PURE__*/React.memo(PickersActionBarComponent);
 export { PickersActionBar };

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,
@@ -158,8 +159,8 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       className: classes.switchViewIcon
     }),
     switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1));
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1));
   const isNextMonthDisabled = useNextMonthDisabled(month, {
     disableFuture,
     maxDate,
@@ -214,6 +215,8 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       }))]
     }), /*#__PURE__*/_jsx(Fade, {
       in: view === 'day',
+      appear: !reduceAnimations,
+      enter: !reduceAnimations,
       children: /*#__PURE__*/_jsx(PickersArrowSwitcher, {
         slots: slots,
         slotProps: slotProps,

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -5,8 +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 { SlideDirection } from '../DateCalendar/PickersSlideTransition';
+import { PickerValidDate, DateView, PickerOwnerState } from '../models';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
     /**
@@ -22,10 +21,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 {
     /**
@@ -41,7 +39,7 @@ export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcher
     currentMonth: PickerValidDate;
     disabled?: boolean;
     views: readonly DateView[];
-    onMonthChange: (date: PickerValidDate, slideDirection: SlideDirection) => void;
+    onMonthChange: (date: PickerValidDate) => void;
     view: DateView;
     reduceAnimations: boolean;
     onViewChange?: (view: DateView) => void;

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 { 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>(props: PickersLayoutProps<TValue> & 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,8 +47,8 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: true,
-      isRtl: true
+      pickerOrientation: 'landscape',
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -57,7 +57,7 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -71,8 +71,8 @@ export const PickersLayoutRoot = styled('div', {
     }
   }, {
     props: {
-      isLandscape: false,
-      isRtl: true
+      pickerOrientation: 'portrait',
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${pickersLayoutClasses.shortcuts}`]: {
@@ -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,26 +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,
-  onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onDismiss: PropTypes.func.isRequired,
-  onOpen: PropTypes.func.isRequired,
-  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 {}
@@ -178,10 +163,6 @@ 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,
-  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'])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { PickersLayout };

package/PickersLayout/PickersLayout.types.d.ts

@@ -3,14 +3,13 @@ import { SxProps, Theme } from '@mui/material/styles';
 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 { ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
-import { DateOrTimeViewWithMeridiem, PickerVariant } 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';
+export interface ExportedPickersLayoutSlots<TValue extends PickerValidValue> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
      * @default PickersActionBar
@@ -25,13 +24,17 @@ export interface ExportedPickersLayoutSlots<TValue, TView extends DateOrTimeView
      * Custom component for wrapping the layout.
      * It wraps the toolbar, views, action bar, and shortcuts.
      */
-    layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>>;
+    layout?: React.JSXElementConstructor<PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>>;
 }
 export interface PickerLayoutOwnerState extends PickerOwnerState {
-    wrapperVariant: PickerVariant;
-    isLandscape: boolean;
+    /**
+     * The direction of the layout.
+     * Is equal to "ltr" when the layout is in left-to-right direction.
+     * Is equal to "rtl" when the layout is in right-to-left direction.
+     */
+    layoutDirection: 'ltr' | 'rtl';
 }
-export interface ExportedPickersLayoutSlotProps<TValue, TView extends DateOrTimeViewWithMeridiem> {
+export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {
     /**
      * Props passed down to the action bar component.
      */
@@ -43,20 +46,20 @@ export interface ExportedPickersLayoutSlotProps<TValue, TView extends DateOrTime
     /**
      * Props passed down to the layoutRoot component.
      */
-    layout?: Partial<PickersLayoutProps<TValue, TView>>;
+    layout?: Partial<PickersLayoutProps<TValue>>;
 }
-export interface PickersLayoutSlots<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TValue, TView> {
+export interface PickersLayoutSlots<TValue extends PickerValidValue> extends ExportedPickersLayoutSlots<TValue> {
     /**
      * Tabs enabling toggling between views.
      */
-    tabs?: React.ElementType<BaseTabsProps<TView>>;
+    tabs?: React.ElementType<{}>;
     /**
      * Custom component for the toolbar.
      * It is placed above the picker views.
      */
-    toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
+    toolbar?: React.JSXElementConstructor<BaseToolbarProps>;
 }
-export interface PickersLayoutSlotProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TValue, TView> {
+export interface PickersLayoutSlotProps<TValue extends PickerValidValue> extends ExportedPickersLayoutSlotProps<TValue> {
     /**
      * Props passed down to the tabs component.
      */
@@ -66,8 +69,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> {
     className?: string;
     children?: React.ReactNode;
     /**
@@ -82,18 +84,14 @@ export interface PickersLayoutProps<TValue, TView extends DateOrTimeViewWithMeri
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersLayoutSlots<TValue, TView>;
+    slots?: PickersLayoutSlots<TValue>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersLayoutSlotProps<TValue, TView>;
-    /**
-     * `true` if the application is in right-to-left direction.
-     */
-    isRtl: boolean;
+    slotProps?: PickersLayoutSlotProps<TValue>;
 }
-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 { 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>(props: PickersLayoutProps<TValue>) => UsePickerLayoutResponse<TValue>;
 export default usePickerLayout;