diff --git a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx index 584a245ad0157..0ed043db403f2 100644 --- a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx +++ b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx @@ -20,8 +20,7 @@ export interface PickersFadeTransitionGroupProps { classes?: Partial; } -const useUtilityClasses = (ownerState: PickersFadeTransitionGroupProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], }; @@ -43,9 +42,10 @@ const PickersFadeTransitionGroupRoot = styled(TransitionGroup, { */ export function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps) { const props = useThemeProps({ props: inProps, name: 'MuiPickersFadeTransitionGroup' }); - const { children, className, reduceAnimations, transKey } = props; - const classes = useUtilityClasses(props); + const { children, className, reduceAnimations, transKey, classes: classesProp } = props; + const classes = useUtilityClasses(classesProp); const theme = useTheme(); + if (reduceAnimations) { return children; } diff --git a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx index 60ff3c131f085..43e847ab4348d 100644 --- a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx +++ b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx @@ -26,8 +26,7 @@ export interface DayCalendarSkeletonProps extends HTMLDivProps { ref?: React.Ref; } -const useUtilityClasses = (ownerState: DayCalendarSkeletonProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], week: ['week'], @@ -59,14 +58,11 @@ const DayCalendarSkeletonDay = styled(Skeleton, { name: 'MuiDayCalendarSkeleton', slot: 'DaySkeleton', overridesResolver: (props, styles) => styles.daySkeleton, -})<{ ownerState: { day: number } }>({ +})({ margin: `0 ${DAY_MARGIN}px`, - variants: [ - { - props: { day: 0 }, - style: { visibility: 'hidden' }, - }, - ], + '&[data-day-in-month="0"]': { + visibility: 'hidden', + }, }); const monthMap = [ @@ -92,22 +88,22 @@ function DayCalendarSkeleton(inProps: DayCalendarSkeletonProps) { name: 'MuiDayCalendarSkeleton', }); - const { className, ...other } = props; + const { className, classes: classesProp, ...other } = props; - const classes = useUtilityClasses(other); + const classes = useUtilityClasses(classesProp); return ( {monthMap.map((week, index) => ( - {week.map((day, index2) => ( + {week.map((dayInMonth, index2) => ( ))} diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index a3e90e38d7b9f..f588e56a189ce 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -18,15 +18,14 @@ import { } from '../internals/hooks/date-helpers-hooks'; import { getPickersCalendarHeaderUtilityClass, + PickersCalendarHeaderClasses, pickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses'; -import { - PickersCalendarHeaderOwnerState, - PickersCalendarHeaderProps, -} from './PickersCalendarHeader.types'; +import { PickersCalendarHeaderProps } from './PickersCalendarHeader.types'; +import { PickerOwnerState } from '../models/pickers'; +import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; -const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], labelContainer: ['labelContainer'], @@ -43,7 +42,7 @@ const PickersCalendarHeaderRoot = styled('div', { slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>({ display: 'flex', alignItems: 'center', @@ -61,7 +60,7 @@ const PickersCalendarHeaderLabelContainer = styled('div', { slot: 'LabelContainer', overridesResolver: (_, styles) => styles.labelContainer, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>(({ theme }) => ({ display: 'flex', overflow: 'hidden', @@ -77,7 +76,7 @@ const PickersCalendarHeaderLabel = styled('div', { slot: 'Label', overridesResolver: (_, styles) => styles.label, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>({ marginRight: 6, }); @@ -87,7 +86,7 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, { slot: 'SwitchViewButton', overridesResolver: (_, styles) => styles.switchViewButton, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>({ marginRight: 'auto', variants: [ @@ -107,7 +106,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, { slot: 'SwitchViewIcon', overridesResolver: (_, styles) => styles.switchViewIcon, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>(({ theme }) => ({ willChange: 'transform', transition: theme.transitions.create('transform'), @@ -154,14 +153,14 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader( views, labelId, className, + classes: classesProp, timezone, format = `${utils.formats.month} ${utils.formats.year}`, ...other } = props; - const ownerState = props; - - const classes = useUtilityClasses(props); + const { ownerState } = usePickerPrivateContext(); + const classes = useUtilityClasses(classesProp); const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton; const switchViewButtonProps = useSlotProps({ diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index 0e058fe60e8db..ca35a59c5ce7f 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -9,7 +9,7 @@ import { 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'; @@ -29,19 +29,17 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { // We keep the interface to allow module augmentation export interface PickersCalendarHeaderSlotPropsOverrides {} -export type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps; - export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps { switchViewButton?: SlotComponentProps< typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, - PickersCalendarHeaderOwnerState + PickerOwnerState >; switchViewIcon?: SlotComponentProps< typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, - PickersCalendarHeaderOwnerState + PickerOwnerState >; } diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx index a5dd5873308f4..65bea5a6bb716 100644 --- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx @@ -7,18 +7,20 @@ import composeClasses from '@mui/utils/composeClasses'; import useSlotProps from '@mui/utils/useSlotProps'; import IconButton from '@mui/material/IconButton'; import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons'; +import { PickersArrowSwitcherProps } from './PickersArrowSwitcher.types'; import { - PickersArrowSwitcherOwnerState, - PickersArrowSwitcherProps, -} from './PickersArrowSwitcher.types'; -import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses'; + getPickersArrowSwitcherUtilityClass, + PickersArrowSwitcherClasses, +} from './pickersArrowSwitcherClasses'; +import { usePickerPrivateContext } from '../../hooks/usePickerPrivateContext'; +import { PickerOwnerState } from '../../../models'; const PickersArrowSwitcherRoot = styled('div', { name: 'MuiPickersArrowSwitcher', slot: 'Root', overridesResolver: (props, styles) => styles.root, })<{ - ownerState: PickersArrowSwitcherProps; + ownerState: PickerOwnerState; }>({ display: 'flex', }); @@ -28,7 +30,7 @@ const PickersArrowSwitcherSpacer = styled('div', { slot: 'Spacer', overridesResolver: (props, styles) => styles.spacer, })<{ - ownerState: PickersArrowSwitcherProps; + ownerState: PickerOwnerState; }>(({ theme }) => ({ width: theme.spacing(3), })); @@ -38,7 +40,7 @@ const PickersArrowSwitcherButton = styled(IconButton, { slot: 'Button', overridesResolver: (props, styles) => styles.button, })<{ - ownerState: PickersArrowSwitcherProps; + ownerState: PickerOwnerState; }>({ variants: [ { @@ -48,8 +50,7 @@ const PickersArrowSwitcherButton = styled(IconButton, { ], }); -const useUtilityClasses = (ownerState: PickersArrowSwitcherOwnerState) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], spacer: ['spacer'], @@ -84,12 +85,13 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch onGoToPrevious, previousLabel, labelId, + classes: classesProp, ...other } = props; - const ownerState = props; + const { ownerState } = usePickerPrivateContext(); - const classes = useUtilityClasses(ownerState); + const classes = useUtilityClasses(classesProp); const nextProps = { isDisabled: isNextDisabled, @@ -117,7 +119,7 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch edge: 'end', onClick: previousProps.goTo, }, - ownerState: { ...ownerState, hidden: previousProps.isHidden }, + ownerState: { ...ownerState, hidden: previousProps.isHidden ?? false }, className: clsx(classes.button, classes.previousIconButton), }); @@ -133,7 +135,7 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch edge: 'start', onClick: nextProps.goTo, }, - ownerState: { ...ownerState, hidden: nextProps.isHidden }, + ownerState: { ...ownerState, hidden: nextProps.isHidden ?? false }, className: clsx(classes.button, classes.nextIconButton), }); diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx index f32e1745edf74..725f070b17504 100644 --- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx @@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/utils'; import IconButton from '@mui/material/IconButton'; import SvgIcon from '@mui/material/SvgIcon'; import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses'; +import { PickerOwnerState } from '../../../models'; export interface ExportedPickersArrowSwitcherProps { /** @@ -41,7 +42,12 @@ export interface PickersArrowSwitcherProps labelId?: string; } -export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps; +export interface PickersArrowSwitcherOwnerState extends PickerOwnerState { + /** + * If `true`, this button should be hidden. + */ + hidden: boolean; +} export interface PickersArrowSwitcherSlotPropsOverrides {} @@ -68,29 +74,25 @@ export interface PickersArrowSwitcherSlots { rightArrowIcon?: React.ElementType; } -export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState { - hidden?: boolean; -} - export interface PickersArrowSwitcherSlotProps { previousIconButton?: SlotComponentProps< typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickersArrowSwitcherOwnerState >; nextIconButton?: SlotComponentProps< typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickersArrowSwitcherOwnerState >; leftArrowIcon?: SlotComponentProps< typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickerOwnerState >; rightArrowIcon?: SlotComponentProps< typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickerOwnerState >; } diff --git a/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts b/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts index 0a845aa4d33d5..085620287683f 100644 --- a/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts @@ -57,13 +57,13 @@ export interface PickersComponentNameToClassKey { MuiPickersCalendarHeader: PickersCalendarHeaderClassKey; MuiPickersDay: PickersDayClassKey; MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupClassKey; + MuiPickersLayout: PickersLayoutClassKey; MuiPickersMonth: PickersMonthClassKey; MuiPickersPopper: PickersPopperClassKey; MuiPickersSlideTransition: PickersSlideTransitionClassKey; MuiPickersToolbar: PickersToolbarClassKey; MuiPickersToolbarButton: PickersToolbarButtonClassKey; MuiPickersToolbarText: PickersToolbarTextClassKey; - MuiPickersLayout: PickersLayoutClassKey; MuiPickersYear: PickersYearClassKey; MuiTimeClock: TimeClockClassKey; MuiTimePickerToolbar: TimePickerToolbarClassKey;