diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index 6de4781ee8a0..538a8fa83ad0 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; import Tab from '@mui/material/Tab'; import Tabs, { tabsClasses } from '@mui/material/Tabs'; import { styled, useThemeProps } from '@mui/material/styles'; -import { unstable_composeClasses as composeClasses } from '@mui/utils'; +import composeClasses from '@mui/utils/composeClasses'; import { TimeIcon, DateRangeIcon } from '../icons'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { useLocaleText } from '../internals/hooks/useUtils'; @@ -101,6 +102,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa timeIcon = , view, hidden = typeof window === 'undefined' || window.innerHeight < 667, + className, } = props; const localeText = useLocaleText(); @@ -120,7 +122,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa variant="fullWidth" value={viewToTab(view)} onChange={handleChange} - className={classes.root} + className={clsx(className, classes.root)} > ( 'MuiPickersLayout', - ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts'], + ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts'], ); diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index 386130ec0e68..735efc971955 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -122,7 +122,9 @@ const usePickerLayout = : null; + view && Tabs ? ( + + ) : null; // Shortcuts diff --git a/packages/x-date-pickers/src/internals/models/props/tabs.ts b/packages/x-date-pickers/src/internals/models/props/tabs.ts index 688dd69d4def..3ff1edc627af 100644 --- a/packages/x-date-pickers/src/internals/models/props/tabs.ts +++ b/packages/x-date-pickers/src/internals/models/props/tabs.ts @@ -11,6 +11,7 @@ export interface BaseTabsProps { * @param {TView} view The view to open */ onViewChange: (view: TView) => void; + className?: string; } export interface ExportedBaseTabsProps {}