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

package/node/CalendarPicker/DayPicker.js

@@ -25,6 +25,8 @@ var _PickersSlideTransition = require("./PickersSlideTransition");
 
 var _useDateValidation = require("../internals/hooks/validation/useDateValidation");
 
+var _dateUtils = require("../internals/utils/date-utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -76,7 +78,6 @@ function DayPicker(props) {
   const now = (0, _useUtils.useNow)();
   const utils = (0, _useUtils.useUtils)();
   const {
-    autoFocus,
     onFocusedDayChange,
     className,
     currentMonth,
@@ -103,6 +104,8 @@ function DayPicker(props) {
     maxDate,
     shouldDisableDate,
     dayOfWeekFormatter = defaultDayOfWeekFormatter,
+    hasFocus,
+    onFocusedViewChange,
     gridLabelId
   } = props;
   const isDateDisabled = (0, _useDateValidation.useIsDayDisabled)({
@@ -112,6 +115,12 @@ function DayPicker(props) {
     disablePast,
     disableFuture
   });
+  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
+  const changeHasFocus = React.useCallback(newHasFocus => {
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  }, [onFocusedViewChange]);
   const handleDaySelect = React.useCallback((day, isFinish = 'finish') => {
     if (readOnly) {
       return;
@@ -119,6 +128,72 @@ function DayPicker(props) {
 
     onSelectedDaysChange(day, isFinish);
   }, [onSelectedDaysChange, readOnly]);
+  const focusDay = React.useCallback(day => {
+    if (!isDateDisabled(day)) {
+      onFocusedDayChange(day);
+      setInternalFocusedDay(day);
+      changeHasFocus(true);
+    }
+  }, [isDateDisabled, onFocusedDayChange, changeHasFocus]);
+  const theme = (0, _styles.useTheme)();
+
+  function handleKeyDown(event, day) {
+    switch (event.key) {
+      case 'ArrowUp':
+        focusDay(utils.addDays(day, -7));
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        focusDay(utils.addDays(day, 7));
+        event.preventDefault();
+        break;
+
+      case 'ArrowLeft':
+        focusDay(utils.addDays(day, theme.direction === 'ltr' ? -1 : 1));
+        event.preventDefault();
+        break;
+
+      case 'ArrowRight':
+        focusDay(utils.addDays(day, theme.direction === 'ltr' ? 1 : -1));
+        event.preventDefault();
+        break;
+
+      case 'Home':
+        focusDay(utils.startOfWeek(day));
+        event.preventDefault();
+        break;
+
+      case 'End':
+        focusDay(utils.endOfWeek(day));
+        event.preventDefault();
+        break;
+
+      case 'PageUp':
+        focusDay(utils.getNextMonth(day));
+        event.preventDefault();
+        break;
+
+      case 'PageDown':
+        focusDay(utils.getPreviousMonth(day));
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  function handleFocus(event, day) {
+    focusDay(day);
+  }
+
+  function handleBlur(event, day) {
+    if (hasFocus && utils.isSameDay(internalFocusedDay, day)) {
+      changeHasFocus(false);
+    }
+  }
+
   const currentMonthNumber = utils.getMonth(currentMonth);
   const validSelectedDays = selectedDays.filter(day => !!day).map(day => utils.startOfDay(day)); // need a new ref whenever the `key` of the transition changes: http://reactcommunity.org/react-transition-group/transition/#Transition-prop-nodeRef.
 
@@ -126,6 +201,24 @@ function DayPicker(props) {
 
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
   const startOfCurrentWeek = utils.startOfWeek(now);
+  const focusableDay = React.useMemo(() => {
+    const startOfMonth = utils.startOfMonth(currentMonth);
+    const endOfMonth = utils.endOfMonth(currentMonth);
+
+    if (isDateDisabled(internalFocusedDay) || utils.isAfterDay(internalFocusedDay, endOfMonth) || utils.isBeforeDay(internalFocusedDay, startOfMonth)) {
+      return (0, _dateUtils.findClosestEnabledDate)({
+        utils,
+        date: internalFocusedDay,
+        minDate: startOfMonth,
+        maxDate: endOfMonth,
+        disablePast,
+        disableFuture,
+        isDateDisabled
+      });
+    }
+
+    return internalFocusedDay;
+  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "grid",
     "aria-labelledby": gridLabelId,
@@ -157,6 +250,7 @@ function DayPicker(props) {
         children: utils.getWeekArray(currentMonth).map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeek, {
           role: "row",
           children: week.map(day => {
+            const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
             const isSelected = validSelectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
             const isToday = utils.isSameDay(day, now);
             const pickersDayProps = {
@@ -164,14 +258,17 @@ function DayPicker(props) {
               day,
               isAnimating: isMonthSwitchingAnimating,
               disabled: disabled || isDateDisabled(day),
-              autoFocus: autoFocus && focusedDay !== null && utils.isSameDay(day, focusedDay),
+              autoFocus: hasFocus && isFocusableDay,
               today: isToday,
               outsideCurrentMonth: utils.getMonth(day) !== currentMonthNumber,
               selected: isSelected,
               disableHighlightToday,
               showDaysOutsideCurrentMonth,
-              onDayFocus: onFocusedDayChange,
+              onKeyDown: handleKeyDown,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
               onDaySelect: handleDaySelect,
+              tabIndex: isFocusableDay ? 0 : -1,
               role: 'gridcell',
               'aria-selected': isSelected
             };

package/node/CalendarPicker/useCalendarState.js

@@ -42,7 +42,7 @@ const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayF
         const needMonthSwitch = action.focusedDay != null && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
         return (0, _extends2.default)({}, state, {
           focusedDay: action.focusedDay,
-          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations,
+          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations && !action.withoutMonthSwitchingAnimation,
           currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
           slideDirection: action.focusedDay != null && utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
         });
@@ -111,11 +111,12 @@ const useCalendarState = ({
       type: 'finishMonthSwitchingAnimation'
     });
   }, []);
-  const changeFocusedDay = React.useCallback(newFocusedDate => {
+  const changeFocusedDay = React.useCallback((newFocusedDate, withoutMonthSwitchingAnimation) => {
     if (!isDateDisabled(newFocusedDate)) {
       dispatch({
         type: 'changeFocusedDay',
-        focusedDay: newFocusedDate
+        focusedDay: newFocusedDate,
+        withoutMonthSwitchingAnimation
       });
     }
   }, [isDateDisabled]);

package/node/DateField/useDateField.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDateField = void 0;
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _shared = require("../DatePicker/shared");
@@ -19,6 +21,7 @@ var _dateUtils = require("../internals/utils/date-utils");
 
 var _useUtils = require("../internals/hooks/useUtils");
 
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast"];
 const dateRangeFieldValueManager = {
   getSectionsFromValue: (utils, prevSections, date, format) => (0, _useField.addPositionPropertiesToSections)((0, _useField.splitFormatIntoSections)(utils, format, date)),
   getValueStrFromSections: sections => (0, _useField.createDateStrFromSections)(sections),
@@ -34,7 +37,8 @@ const dateRangeFieldValueManager = {
     value,
     update: newActiveDate => newActiveDate
   }),
-  hasError: error => error != null
+  hasError: error => error != null,
+  isSameError: _useDateValidation.isSameDateError
 };
 
 const useDefaultizedDateField = props => {
@@ -50,9 +54,37 @@ const useDefaultizedDateField = props => {
 };
 
 const useDateField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+  const _useDefaultizedDateFi = useDefaultizedDateField(inProps),
+        {
+    value,
+    defaultValue,
+    format,
+    onChange,
+    readOnly,
+    onError,
+    shouldDisableDate,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast
+  } = _useDefaultizedDateFi,
+        other = (0, _objectWithoutPropertiesLoose2.default)(_useDefaultizedDateFi, _excluded);
+
   return (0, _useField.useField)({
-    props,
+    forwardedProps: other,
+    internalProps: {
+      value,
+      defaultValue,
+      format,
+      onChange,
+      readOnly,
+      onError,
+      shouldDisableDate,
+      minDate,
+      maxDate,
+      disableFuture,
+      disablePast
+    },
     valueManager: _shared.datePickerValueManager,
     fieldValueManager: dateRangeFieldValueManager,
     // TODO: Support time validation.

package/node/DateTimePicker/DateTimePicker.js

@@ -232,7 +232,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   getViewSwitchingButtonText: _propTypes.default.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: _propTypes.default.bool,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 
 var _Tabs = _interopRequireWildcard(require("@mui/material/Tabs"));
@@ -58,9 +60,6 @@ const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default)(({
     top: 0
   }
 }));
-/**
- * @ignore - internal component.
- */
 
 const DateTimePickerTabs = props => {
   const {
@@ -100,4 +99,33 @@ const DateTimePickerTabs = props => {
   });
 };
 
-exports.DateTimePickerTabs = DateTimePickerTabs;
+exports.DateTimePickerTabs = DateTimePickerTabs;
+process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Date tab icon.
+   * @default DateRange
+   */
+  dateRangeIcon: _propTypes.default.node,
+
+  /**
+   * Callback called when tab is clicked
+   * @param {CalendarOrClockPickerView} view Picker view that was clicked
+   */
+  onChange: _propTypes.default.func.isRequired,
+
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon: _propTypes.default.node,
+
+  /**
+   * Open picker view
+   */
+  view: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired
+} : void 0;

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -23,15 +23,11 @@ var _PickersToolbar = require("../internals/components/PickersToolbar");
 
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
 
-var _DateTimePickerTabs = require("./DateTimePickerTabs");
-
 var _useUtils = require("../internals/hooks/useUtils");
 
-var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVariantContext");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["ampm", "parsedValue", "dateRangeIcon", "hideTabs", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "timeIcon", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -85,12 +81,9 @@ const DateTimePickerToolbar = props => {
   const {
     ampm,
     parsedValue,
-    dateRangeIcon,
-    hideTabs,
     isMobileKeyboardViewOpen,
     openView,
     setOpenView,
-    timeIcon,
     toggleMobileKeyboardView,
     toolbarFormat,
     toolbarPlaceholder = '––',
@@ -101,8 +94,6 @@ const DateTimePickerToolbar = props => {
   const utils = (0, _useUtils.useUtils)();
   const localeText = (0, _useUtils.useLocaleText)();
   const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.dateTimePickerDefaultToolbarTitle;
-  const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
-  const showTabs = wrapperVariant === 'desktop' ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
 
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
 
@@ -118,72 +109,65 @@ const DateTimePickerToolbar = props => {
     return utils.format(parsedValue, 'shortDate');
   }, [parsedValue, toolbarFormat, toolbarPlaceholder, utils]);
   const ownerState = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [wrapperVariant !== 'desktop' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
-      toolbarTitle: toolbarTitle,
-      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-      toggleMobileKeyboardView: toggleMobileKeyboardView,
-      className: dateTimePickerToolbarClasses.root
-    }, other, {
-      isLandscape: false,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
+    toolbarTitle: toolbarTitle,
+    isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+    toggleMobileKeyboardView: toggleMobileKeyboardView,
+    className: dateTimePickerToolbarClasses.root
+  }, other, {
+    isLandscape: false,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
+      className: dateTimePickerToolbarClasses.dateContainer,
+      ownerState: ownerState,
+      children: [views.includes('year') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+        tabIndex: -1,
+        variant: "subtitle1",
+        onClick: () => setOpenView('year'),
+        selected: openView === 'year',
+        value: parsedValue ? utils.format(parsedValue, 'year') : '–'
+      }), views.includes('day') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+        tabIndex: -1,
+        variant: "h4",
+        onClick: () => setOpenView('day'),
+        selected: openView === 'day',
+        value: dateText
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeContainer, {
+      className: dateTimePickerToolbarClasses.timeContainer,
       ownerState: ownerState,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
-        className: dateTimePickerToolbarClasses.dateContainer,
-        ownerState: ownerState,
-        children: [views.includes('year') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-          tabIndex: -1,
-          variant: "subtitle1",
-          onClick: () => setOpenView('year'),
-          selected: openView === 'year',
-          value: parsedValue ? utils.format(parsedValue, 'year') : '–'
-        }), views.includes('day') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-          tabIndex: -1,
-          variant: "h4",
-          onClick: () => setOpenView('day'),
-          selected: openView === 'day',
-          value: dateText
+      children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+        variant: "h3",
+        onClick: () => setOpenView('hours'),
+        selected: openView === 'hours',
+        value: parsedValue ? formatHours(parsedValue) : '--'
+      }), views.includes('minutes') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
+          variant: "h3",
+          value: ":",
+          className: dateTimePickerToolbarClasses.separator,
+          ownerState: ownerState
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+          variant: "h3",
+          onClick: () => setOpenView('minutes'),
+          selected: openView === 'minutes',
+          value: parsedValue ? utils.format(parsedValue, 'minutes') : '--'
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeContainer, {
-        className: dateTimePickerToolbarClasses.timeContainer,
-        ownerState: ownerState,
-        children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+      }), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
+          variant: "h3",
+          value: ":",
+          className: dateTimePickerToolbarClasses.separator,
+          ownerState: ownerState
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
           variant: "h3",
-          onClick: () => setOpenView('hours'),
-          selected: openView === 'hours',
-          value: parsedValue ? formatHours(parsedValue) : '--'
-        }), views.includes('minutes') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
-            variant: "h3",
-            value: ":",
-            className: dateTimePickerToolbarClasses.separator,
-            ownerState: ownerState
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-            variant: "h3",
-            onClick: () => setOpenView('minutes'),
-            selected: openView === 'minutes',
-            value: parsedValue ? utils.format(parsedValue, 'minutes') : '--'
-          })]
-        }), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
-            variant: "h3",
-            value: ":",
-            className: dateTimePickerToolbarClasses.separator,
-            ownerState: ownerState
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-            variant: "h3",
-            onClick: () => setOpenView('seconds'),
-            selected: openView === 'seconds',
-            value: parsedValue ? utils.format(parsedValue, 'seconds') : '--'
-          })]
+          onClick: () => setOpenView('seconds'),
+          selected: openView === 'seconds',
+          value: parsedValue ? utils.format(parsedValue, 'seconds') : '--'
         })]
       })]
-    })), showTabs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerTabs.DateTimePickerTabs, {
-      dateRangeIcon: dateRangeIcon,
-      timeIcon: timeIcon,
-      view: openView,
-      onChange: setOpenView
     })]
-  });
+  }));
 };
 
 exports.DateTimePickerToolbar = DateTimePickerToolbar;

package/node/DateTimePicker/index.js

@@ -9,5 +9,13 @@ Object.defineProperty(exports, "DateTimePicker", {
     return _DateTimePicker.DateTimePicker;
   }
 });
+Object.defineProperty(exports, "DateTimePickerTabs", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePickerTabs.DateTimePickerTabs;
+  }
+});
+
+var _DateTimePicker = require("./DateTimePicker");
 
-var _DateTimePicker = require("./DateTimePicker");
+var _DateTimePickerTabs = require("./DateTimePickerTabs");

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -29,9 +29,11 @@ var _KeyboardDateInput = require("../internals/components/KeyboardDateInput");
 
 var _usePickerState = require("../internals/hooks/usePickerState");
 
+var _DateTimePicker = require("../DateTimePicker");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps"];
+const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps", "hideTabs"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -60,10 +62,14 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     PopperProps,
     ToolbarComponent = _DateTimePickerToolbar.DateTimePickerToolbar,
     TransitionComponent,
-    components,
-    componentsProps
+    components: providedComponents,
+    componentsProps,
+    hideTabs = true
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const components = React.useMemo(() => (0, _extends2.default)({
+    Tabs: _DateTimePicker.DateTimePickerTabs
+  }, providedComponents), [providedComponents]);
   const AllDateInputProps = (0, _extends2.default)({}, inputProps, other, {
     components,
     componentsProps,
@@ -84,7 +90,8 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       ToolbarComponent: ToolbarComponent,
       DateInputProps: AllDateInputProps,
       components: components,
-      componentsProps: componentsProps
+      componentsProps: componentsProps,
+      hideTabs: hideTabs
     }, other))
   }));
 });
@@ -236,7 +243,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
   getViewSwitchingButtonText: _propTypes.default.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: _propTypes.default.bool,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -29,9 +29,11 @@ var _PureDateInput = require("../internals/components/PureDateInput");
 
 var _usePickerState = require("../internals/hooks/usePickerState");
 
+var _DateTimePicker = require("../DateTimePicker");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps", "hideTabs"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,10 +61,14 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
 
   const {
     ToolbarComponent = _DateTimePickerToolbar.DateTimePickerToolbar,
-    components,
-    componentsProps
+    components: providedComponents,
+    componentsProps,
+    hideTabs = false
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const components = React.useMemo(() => (0, _extends2.default)({
+    Tabs: _DateTimePicker.DateTimePickerTabs
+  }, providedComponents), [providedComponents]);
   const DateInputProps = (0, _extends2.default)({}, inputProps, other, {
     components,
     componentsProps,
@@ -80,7 +86,8 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
       ToolbarComponent: ToolbarComponent,
       DateInputProps: DateInputProps,
       components: components,
-      componentsProps: componentsProps
+      componentsProps: componentsProps,
+      hideTabs: hideTabs
     }, other))
   }));
 });
@@ -237,7 +244,8 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
   getViewSwitchingButtonText: _propTypes.default.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: _propTypes.default.bool,
   ignoreInvalidInputs: _propTypes.default.bool,