@mui/x-date-pickers 5.0.0-beta.7 → 5.0.0

package/MonthPicker/PickersMonth.d.ts

@@ -3,9 +3,13 @@ declare const classes: Record<"root" | "selected", string>;
 export interface MonthProps {
     children: React.ReactNode;
     disabled?: boolean;
-    onSelect: (value: any) => void;
+    onSelect: (value: number) => void;
     selected?: boolean;
-    value: any;
+    value: number;
+    hasFocus: boolean;
+    onBlur: (event: React.FocusEvent, month: number) => void;
+    onFocus: (event: React.FocusEvent, month: number) => void;
+    tabIndex: number;
 }
 export declare type PickersMonthClassKey = keyof typeof classes;
 /**

package/MonthPicker/PickersMonth.js

@@ -1,11 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disabled", "onSelect", "selected", "value"];
+const _excluded = ["disabled", "onSelect", "selected", "value", "tabIndex", "hasFocus", "onFocus", "onBlur"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, alpha } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { onSpaceOrEnter } from '../internals/utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
@@ -40,16 +41,23 @@ const PickersMonthRoot = styled(Typography)(({
     }
   }
 }));
+
+const noop = () => {};
 /**
  * @ignore - do not document.
  */
 
+
 export const PickersMonth = props => {
   const {
     disabled,
     onSelect,
     selected,
-    value
+    value,
+    tabIndex,
+    hasFocus,
+    onFocus = noop,
+    onBlur = noop
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -57,15 +65,26 @@ export const PickersMonth = props => {
     onSelect(value);
   };
 
+  const ref = React.useRef(null);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      var _ref$current;
+
+      (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+    }
+  }, [hasFocus]);
   return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
+    ref: ref,
     component: "button",
     type: "button",
     className: clsx(classes.root, selected && classes.selected),
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: tabIndex,
     onClick: handleSelection,
     onKeyDown: onSpaceOrEnter(handleSelection),
     color: selected ? 'primary' : undefined,
     variant: selected ? 'h5' : 'subtitle1',
-    disabled: disabled
+    disabled: disabled,
+    onFocus: event => onFocus(event, value),
+    onBlur: event => onBlur(event, value)
   }, other));
 };

package/PickersDay/PickersDay.d.ts

@@ -5,7 +5,7 @@ import { Theme } from '@mui/material/styles';
 import { ExtendMui } from '../internals/models/helpers';
 import { PickerSelectionState } from '../internals/hooks/usePickerState';
 import { PickersDayClasses } from './pickersDayClasses';
-export interface PickersDayProps<TDate> extends ExtendMui<ButtonBaseProps> {
+export interface PickersDayProps<TDate> extends Omit<ExtendMui<ButtonBaseProps>, 'onKeyDown' | 'onFocus' | 'onBlur'> {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -30,7 +30,9 @@ export interface PickersDayProps<TDate> extends ExtendMui<ButtonBaseProps> {
      */
     disableMargin?: boolean;
     isAnimating?: boolean;
-    onDayFocus?: (day: TDate) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>, day: TDate) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>, day: TDate) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, day: TDate) => void;
     onDaySelect: (day: TDate, isFinish: PickerSelectionState) => void;
     /**
      * If `true`, day is outside of month and will be hidden.

package/PickersDay/PickersDay.js

@@ -1,13 +1,13 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDayFocus", "onDaySelect", "onFocus", "onKeyDown", "onMouseDown", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today"];
+const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ButtonBase from '@mui/material/ButtonBase';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useTheme, alpha, styled, useThemeProps } from '@mui/material/styles';
+import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import { useForkRef } from '@mui/material/utils';
 import { useUtils } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
@@ -121,10 +121,10 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     disableMargin = false,
     isAnimating,
     onClick,
-    onDayFocus = noop,
     onDaySelect,
-    onFocus,
-    onKeyDown,
+    onFocus = noop,
+    onBlur = noop,
+    onKeyDown = noop,
     onMouseDown,
     outsideCurrentMonth,
     selected = false,
@@ -155,20 +155,9 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
       // ref.current being null would be a bug in MUI
       ref.current.focus();
     }
-  }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
-
-  const handleFocus = event => {
-    if (onDayFocus) {
-      onDayFocus(day);
-    }
-
-    if (onFocus) {
-      onFocus(event);
-    }
-  }; // For day outside of current month, move focus from mouseDown to mouseUp
+  }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]); // For day outside of current month, move focus from mouseDown to mouseUp
   // Goal: have the onClick ends before sliding to the new month
 
-
   const handleMouseDown = event => {
     if (onMouseDown) {
       onMouseDown(event);
@@ -193,59 +182,6 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     }
   };
 
-  const theme = useTheme();
-
-  function handleKeyDown(event) {
-    if (onKeyDown !== undefined) {
-      onKeyDown(event);
-    }
-
-    switch (event.key) {
-      case 'ArrowUp':
-        onDayFocus(utils.addDays(day, -7));
-        event.preventDefault();
-        break;
-
-      case 'ArrowDown':
-        onDayFocus(utils.addDays(day, 7));
-        event.preventDefault();
-        break;
-
-      case 'ArrowLeft':
-        onDayFocus(utils.addDays(day, theme.direction === 'ltr' ? -1 : 1));
-        event.preventDefault();
-        break;
-
-      case 'ArrowRight':
-        onDayFocus(utils.addDays(day, theme.direction === 'ltr' ? 1 : -1));
-        event.preventDefault();
-        break;
-
-      case 'Home':
-        onDayFocus(utils.startOfWeek(day));
-        event.preventDefault();
-        break;
-
-      case 'End':
-        onDayFocus(utils.endOfWeek(day));
-        event.preventDefault();
-        break;
-
-      case 'PageUp':
-        onDayFocus(utils.getNextMonth(day));
-        event.preventDefault();
-        break;
-
-      case 'PageDown':
-        onDayFocus(utils.getPreviousMonth(day));
-        event.preventDefault();
-        break;
-
-      default:
-        break;
-    }
-  }
-
   if (outsideCurrentMonth && !showDaysOutsideCurrentMonth) {
     return /*#__PURE__*/_jsx(PickersDayFiller, {
       className: clsx(classes.root, classes.hiddenDaySpacingFiller, className),
@@ -261,8 +197,9 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     centerRipple: true,
     disabled: disabled,
     tabIndex: selected ? 0 : -1,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
+    onKeyDown: event => onKeyDown(event, day),
+    onFocus: event => onFocus(event, day),
+    onBlur: event => onBlur(event, day),
     onClick: handleClick,
     onMouseDown: handleMouseDown
   }, other, {
@@ -270,7 +207,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
   }));
 });
 export const areDayPropsEqual = (prevProps, nextProps) => {
-  return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onDayFocus === nextProps.onDayFocus && prevProps.onDaySelect === nextProps.onDaySelect;
+  return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.onDaySelect === nextProps.onDaySelect;
 };
 process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -306,8 +243,10 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
    */
   disableMargin: PropTypes.bool,
   isAnimating: PropTypes.bool,
-  onDayFocus: PropTypes.func,
+  onBlur: PropTypes.func,
   onDaySelect: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
 
   /**
    * If `true`, day is outside of month and will be hidden.

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -9,6 +9,7 @@ import { PickerStaticWrapper } from '../internals/components/PickerStaticWrapper
 import { CalendarOrClockPicker } from '../internals/components/CalendarOrClockPicker';
 import { useDateTimeValidation } from '../internals/hooks/validation/useDateTimeValidation';
 import { usePickerState } from '../internals/hooks/usePickerState';
+import { DateTimePickerTabs } from '../DateTimePicker';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
@@ -28,8 +29,9 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
   const {
     displayStaticWrapperAs = 'mobile',
     ToolbarComponent = DateTimePickerToolbar,
-    components,
-    componentsProps
+    components: providedComponents,
+    componentsProps,
+    hideTabs = displayStaticWrapperAs === 'desktop'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -39,6 +41,9 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
     wrapperProps
   } = usePickerState(props, dateTimePickerValueManager);
   const validationError = useDateTimeValidation(props) !== null;
+  const components = React.useMemo(() => _extends({
+    Tabs: DateTimePickerTabs
+  }, providedComponents), [providedComponents]);
 
   const DateInputProps = _extends({}, inputProps, other, {
     ref,
@@ -57,7 +62,8 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
       ToolbarComponent: ToolbarComponent,
       DateInputProps: DateInputProps,
       components: components,
-      componentsProps: componentsProps
+      componentsProps: componentsProps,
+      hideTabs: hideTabs
     }, other))
   }));
 });
@@ -213,7 +219,8 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
   getViewSwitchingButtonText: PropTypes.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: PropTypes.bool,
   ignoreInvalidInputs: PropTypes.bool,

package/YearPicker/PickersYear.d.ts

@@ -16,6 +16,9 @@ export interface YearProps {
     onKeyDown: (event: React.KeyboardEvent, value: number) => void;
     selected: boolean;
     value: number;
+    tabIndex: number;
+    onFocus: (event: React.FocusEvent, year: number) => void;
+    onBlur: (event: React.FocusEvent, year: number) => void;
 }
 export declare function getPickersYearUtilityClass(slot: string): string;
 export declare type PickersYearClassKey = keyof NonNullable<YearProps['classes']>;

package/YearPicker/PickersYear.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "onClick", "onKeyDown", "selected", "value"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "onClick", "onKeyDown", "value", "tabIndex", "onFocus", "onBlur"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { useForkRef, capitalize } from '@mui/material/utils';
@@ -64,10 +64,13 @@ const PickersYearButton = styled('button')(({
     }
   }
 }));
+
+const noop = () => {};
 /**
  * @ignore - internal component.
  */
 
+
 export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
   const {
     autoFocus,
@@ -76,8 +79,10 @@ export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(pr
     disabled,
     onClick,
     onKeyDown,
-    selected,
-    value
+    value,
+    tabIndex,
+    onFocus = noop,
+    onBlur = noop
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -104,9 +109,11 @@ export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(pr
       ref: refHandle,
       disabled: disabled,
       type: "button",
-      tabIndex: selected ? 0 : -1,
+      tabIndex: disabled ? -1 : tabIndex,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
+      onFocus: event => onFocus(event, value),
+      onBlur: event => onBlur(event, value),
       className: classes.yearButton,
       ownerState: ownerState
     }, other, {

package/YearPicker/YearPicker.d.ts

@@ -16,6 +16,9 @@ export interface YearPickerProps<TDate> extends YearValidationProps<TDate>, Base
      * @default false
      */
     disableHighlightToday?: boolean;
+    onYearFocus?: (year: number) => void;
+    hasFocus?: boolean;
+    onFocusedViewChange?: (newHasFocus: boolean) => void;
 }
 declare type YearPickerComponent = (<TDate>(props: YearPickerProps<TDate>) => JSX.Element) & {
     propTypes?: any;

package/YearPicker/YearPicker.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useControlled } from '@mui/material/utils';
 import clsx from 'clsx';
 import { PickersYear } from './PickersYear';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
@@ -66,7 +67,10 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
     onChange,
     readOnly,
     shouldDisableYear,
-    disableHighlightToday
+    disableHighlightToday,
+    onYearFocus,
+    hasFocus,
+    onFocusedViewChange
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
@@ -84,7 +88,20 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
   }, [now, date, utils, disableHighlightToday]);
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const selectedYearRef = React.useRef(null);
-  const [focusedYear, setFocusedYear] = React.useState(currentYear);
+  const [focusedYear, setFocusedYear] = React.useState(() => currentYear || utils.getYear(now));
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
+    name: 'YearPicker',
+    state: 'hasFocus',
+    controlled: hasFocus,
+    default: autoFocus
+  });
+  const changeHasFocus = React.useCallback(newHasFocus => {
+    setInternalHasFocus(newHasFocus);
+
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  }, [setInternalHasFocus, onFocusedViewChange]);
   const isYearDisabled = React.useCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
@@ -121,11 +138,15 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
   const focusYear = React.useCallback(year => {
     if (!isYearDisabled(utils.setYear(selectedDateOrToday, year))) {
       setFocusedYear(year);
+      changeHasFocus(true);
+      onYearFocus == null ? void 0 : onYearFocus(year);
     }
-  }, [selectedDateOrToday, isYearDisabled, utils]);
+  }, [isYearDisabled, utils, selectedDateOrToday, changeHasFocus, onYearFocus]);
+  React.useEffect(() => {
+    setFocusedYear(prevFocusedYear => currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear);
+  }, [currentYear]);
   const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
-
-  const handleKeyDown = (event, year) => {
+  const handleKeyDown = React.useCallback((event, year) => {
     switch (event.key) {
       case 'ArrowUp':
         focusYear(year - yearsInRow);
@@ -150,8 +171,15 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
       default:
         break;
     }
-  };
-
+  }, [focusYear, theme.direction, yearsInRow]);
+  const handleFocus = React.useCallback((event, year) => {
+    focusYear(year);
+  }, [focusYear]);
+  const handleBlur = React.useCallback((event, year) => {
+    if (focusedYear === year) {
+      changeHasFocus(false);
+    }
+  }, [focusedYear, changeHasFocus]);
   const nowYear = utils.getYear(now);
   return /*#__PURE__*/_jsx(YearPickerRoot, {
     ref: ref,
@@ -165,9 +193,12 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
         value: yearNumber,
         onClick: handleYearSelection,
         onKeyDown: handleKeyDown,
-        autoFocus: autoFocus && yearNumber === focusedYear,
+        autoFocus: internalHasFocus && yearNumber === focusedYear,
         ref: selected ? selectedYearRef : undefined,
         disabled: disabled || isYearDisabled(year),
+        tabIndex: yearNumber === focusedYear ? 0 : -1,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         "aria-current": nowYear === yearNumber ? 'date' : undefined,
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
@@ -202,6 +233,7 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  hasFocus: PropTypes.bool,
 
   /**
    * Maximal selectable date. @DateIOType
@@ -214,6 +246,8 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
   minDate: PropTypes.any,
   onChange: PropTypes.func.isRequired,
   onFocusedDayChange: PropTypes.func,
+  onFocusedViewChange: PropTypes.func,
+  onYearFocus: PropTypes.func,
   readOnly: PropTypes.bool,
 
   /**

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-beta.7
+/** @license MUI v5.0.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DateTimePickerTabsProps } from '../../../DateTimePicker';
 import { ExportedClockPickerProps } from '../../../ClockPicker/ClockPicker';
 import { CalendarPickerSlotsComponent, CalendarPickerSlotsComponentsProps, ExportedCalendarPickerProps } from '../../../CalendarPicker/CalendarPicker';
 import { DateInputPropsLike } from '../wrappers/WrapperProps';
@@ -7,8 +8,14 @@ import { BasePickerProps } from '../../models/props/basePickerProps';
 import { CalendarOrClockPickerView } from '../../models';
 import { BaseToolbarProps } from '../../models/props/baseToolbarProps';
 export interface CalendarOrClockPickerSlotsComponent extends CalendarPickerSlotsComponent {
+    /**
+     * Tabs enabling toggling between date and time pickers.
+     * @default DateTimePickerTabs
+     */
+    Tabs: React.ElementType<DateTimePickerTabsProps>;
 }
 export interface CalendarOrClockPickerSlotsComponentsProps extends CalendarPickerSlotsComponentsProps {
+    tabs: Omit<DateTimePickerTabsProps, 'onChange' | 'view'>;
 }
 export interface ExportedCalendarOrClockPickerProps<TDate, View extends CalendarOrClockPickerView> extends Omit<BasePickerProps<any, TDate | null>, 'value' | 'onChange'>, Omit<ExportedCalendarPickerProps<TDate>, 'onViewChange' | 'openTo' | 'view'>, ExportedClockPickerProps<TDate> {
     dateRangeIcon?: React.ReactNode;
@@ -40,6 +47,7 @@ export interface ExportedCalendarOrClockPickerProps<TDate, View extends Calendar
     toolbarFormat?: string;
     toolbarPlaceholder?: React.ReactNode;
     toolbarTitle?: React.ReactNode;
+    hideTabs?: boolean;
 }
 export interface CalendarOrClockPickerProps<TDate, View extends CalendarOrClockPickerView> extends ExportedCalendarOrClockPickerProps<TDate, View>, PickerStatePickerProps<TDate | null> {
     autoFocus?: boolean;

package/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "parsedValue", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+const _excluded = ["autoFocus", "className", "parsedValue", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views", "dateRangeIcon", "timeIcon", "hideTabs"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useViews } from '../../hooks/useViews';
@@ -10,6 +10,7 @@ import { KeyboardDateInput } from '../KeyboardDateInput';
 import { useIsLandscape } from '../../hooks/useIsLandscape';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 import { PickerViewRoot } from '../PickerViewRoot';
+import { useFocusManagement } from './useFocusManagement';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const MobileKeyboardInputView = styled('div')({
@@ -32,6 +33,8 @@ const isDatePickerView = view => view === 'year' || view === 'month' || view ===
 const isTimePickerView = view => view === 'hours' || view === 'minutes' || view === 'seconds';
 
 export function CalendarOrClockPicker(props) {
+  var _other$components, _other$componentsProp;
+
   const {
     autoFocus,
     parsedValue,
@@ -47,13 +50,18 @@ export function CalendarOrClockPicker(props) {
     toolbarFormat,
     toolbarPlaceholder,
     toolbarTitle,
-    views
+    views,
+    dateRangeIcon,
+    timeIcon,
+    hideTabs
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const TabsComponent = (_other$components = other.components) == null ? void 0 : _other$components.Tabs;
   const isLandscape = useIsLandscape(views, orientation);
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const toShowToolbar = showToolbar != null ? showToolbar : wrapperVariant !== 'desktop';
+  const showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
   const handleDateChange = React.useCallback((newDate, selectionState) => {
     onDateChange(newDate, wrapperVariant, selectionState);
   }, [onDateChange, wrapperVariant]);
@@ -77,6 +85,13 @@ export function CalendarOrClockPicker(props) {
     onChange: handleDateChange,
     onViewChange: handleViewChange
   });
+  const {
+    focusedView,
+    setFocusedView
+  } = useFocusManagement({
+    autoFocus,
+    openView
+  });
   return /*#__PURE__*/_jsxs(PickerRoot, {
     ownerState: {
       isLandscape
@@ -93,7 +108,12 @@ export function CalendarOrClockPicker(props) {
       toolbarPlaceholder: toolbarPlaceholder,
       isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
       toggleMobileKeyboardView: toggleMobileKeyboardView
-    })), /*#__PURE__*/_jsx(PickerViewRoot, {
+    })), showTabs && !!TabsComponent && /*#__PURE__*/_jsx(TabsComponent, _extends({
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      view: openView,
+      onChange: setOpenView
+    }, (_other$componentsProp = other.componentsProps) == null ? void 0 : _other$componentsProp.tabs)), /*#__PURE__*/_jsx(PickerViewRoot, {
       children: isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
         children: /*#__PURE__*/_jsx(KeyboardDateInput, _extends({}, DateInputProps, {
           ignoreInvalidInputs: true,
@@ -108,7 +128,9 @@ export function CalendarOrClockPicker(props) {
           onChange: handleChangeAndOpenNext,
           view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
           ,
-          views: views.filter(isDatePickerView)
+          views: views.filter(isDatePickerView),
+          focusedView: focusedView,
+          onFocusedViewChange: setFocusedView
         }, other)), isTimePickerView(openView) && /*#__PURE__*/_jsx(ClockPicker, _extends({}, other, {
           autoFocus: autoFocus,
           date: parsedValue,

package/internals/components/CalendarOrClockPicker/useFocusManagement.d.ts

@@ -0,0 +1,10 @@
+import { CalendarPickerView } from '../../models/views';
+interface FocusStateInput {
+    autoFocus?: boolean;
+    openView: any;
+}
+export declare const useFocusManagement: ({ autoFocus, openView }: FocusStateInput) => {
+    focusedView: CalendarPickerView | null;
+    setFocusedView: (view: CalendarPickerView) => (newHasFocus: boolean) => void;
+};
+export {};

package/internals/components/CalendarOrClockPicker/useFocusManagement.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export const useFocusManagement = ({
+  autoFocus,
+  openView
+}) => {
+  const [focusedView, setFocusedView] = React.useState(autoFocus ? openView : null);
+  const setFocusedViewCallback = React.useCallback(view => newHasFocus => {
+    if (newHasFocus) {
+      setFocusedView(view);
+    } else {
+      setFocusedView(prevFocusedView => view === prevFocusedView ? null : prevFocusedView);
+    }
+  }, []);
+  return {
+    focusedView,
+    setFocusedView: setFocusedViewCallback
+  };
+};

package/internals/components/PickersArrowSwitcher.d.ts

@@ -1,8 +1,24 @@
 import * as React from 'react';
 export interface PickersArrowSwitcherSlotsComponent {
+    /**
+     * Button allowing to switch to the left view.
+     * @default IconButton
+     */
     LeftArrowButton: React.ElementType;
+    /**
+     * Icon displayed in the left view switch button.
+     * @default ArrowLeft
+     */
     LeftArrowIcon: React.ElementType;
+    /**
+     * Button allowing to switch to the right view.
+     * @default IconButton
+     */
     RightArrowButton: React.ElementType;
+    /**
+     * Icon displayed in the right view switch button.
+     * @default ArrowRight
+     */
     RightArrowIcon: React.ElementType;
 }
 export interface PickersArrowSwitcherSlotsComponentsProps {