From f561a95b2db3d8bccdd5d8efe7c497bb62f8c4f0 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 28 Apr 2021 09:21:48 +0700
Subject: [PATCH] split to 2 components

---
 .../src/PickersDay/PickersDay.tsx             | 80 ++++++++++---------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx
index e67904d63ee677..9aa48bc8a44117 100644
--- a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx
+++ b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx
@@ -36,8 +36,8 @@ const useUtilityClasses = (styleProps: PickersDayProps<any>) => {
       !disableMargin && 'dayWithMargin',
       !disableHighlightToday && today && 'today',
       outsideCurrentMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth',
-      outsideCurrentMonth && !showDaysOutsideCurrentMonth && 'hiddenDaySpacingFiller',
     ],
+    hiddenDaySpacingFiller: ['hiddenDaySpacingFiller'],
   };
 
   return composeClasses(slots, getPickersDayUtilityClass, classes);
@@ -92,15 +92,28 @@ const PickersDayRoot = experimentalStyled(
       color: theme.palette.text.secondary,
     }),
   ...(!styleProps?.disableHighlightToday &&
-    !styleProps?.isToday && {
+    styleProps?.today && {
       [`&:not(.${pickersDayClasses.selected})`]: {
         border: `1px solid ${theme.palette.text.secondary}`,
       },
     }),
-  ...(styleProps?.outsideCurrentMonth &&
-    !styleProps?.showDaysOutsideCurrentMonth && {
-      visibility: 'hidden',
-    }),
+}));
+
+const PickersDayFiller = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiPickersDay',
+    slot: 'Filler',
+    overridesResolver: (props, styles) => styles.hiddenDaySpacingFiller,
+  },
+)(({ styleProps }) => ({
+  width: DAY_SIZE,
+  height: DAY_SIZE,
+  visibility: 'hidden',
+  ...(!styleProps?.disableMargin && {
+    margin: `0 ${DAY_MARGIN}px`,
+  }),
 }));
 
 export interface PickersDayProps<TDate> extends ExtendMui<ButtonBaseProps> {
@@ -304,38 +317,33 @@ const PickersDay = React.forwardRef(function PickersDay<TDate>(
   }
 
   if (outsideCurrentMonth && !showDaysOutsideCurrentMonth) {
-    return <div aria-hidden className={clsx(classes.root, className)} />;
-  }
-
-  let injectedProps: Parameters<typeof PickersDayRoot>[0] & { 'data-mui-test'?: string } = {
-    styleProps,
-    className: clsx(classes.root, className),
-    children: null,
-  };
-
-  if (outsideCurrentMonth && !showDaysOutsideCurrentMonth) {
-    injectedProps = {
-      ...injectedProps,
-      'aria-hidden': true,
-    };
-  } else {
-    injectedProps = {
-      ...injectedProps,
-      ref: handleRef,
-      centerRipple: true,
-      'data-mui-test': 'day',
-      disabled,
-      'aria-label': utils.format(day, 'fullDate'),
-      tabIndex: selected ? 0 : -1,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onClick: handleClick,
-      ...other,
-      children: utils.format(day, 'dayOfMonth'),
-    };
+    return (
+      <PickersDayFiller
+        aria-hidden
+        className={classes.hiddenDaySpacingFiller}
+        styleProps={styleProps}
+      />
+    );
   }
 
-  return <PickersDayRoot {...injectedProps} />;
+  return (
+    <PickersDayRoot
+      className={clsx(classes.root, className)}
+      styleProps={styleProps}
+      ref={handleRef}
+      centerRipple
+      data-mui-test="day"
+      disabled={disabled}
+      aria-label={utils.format(day, 'fullDate')}
+      tabIndex={selected ? 0 : -1}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      onClick={handleClick}
+      {...other}
+    >
+      {utils.format(day, 'dayOfMonth')}
+    </PickersDayRoot>
+  );
 });
 
 export const areDayPropsEqual = (