From 109b0dfe88fb755c0f7d52541da76e0be458177c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 May 2021 13:39:16 +0700
Subject: [PATCH 1/7] migrate to emotion

---
 .../DateRangePicker/DateRangePickerInput.tsx  | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx
index f99adfb03bab28..ad1e0f906d6f5f 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiStyles, StyleRules, withStyles, WithStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { RangeInput, DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
 import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
@@ -12,26 +12,18 @@ import {
   MuiTextFieldProps,
 } from '../internal/pickers/PureDateInput';
 
-export type DateRangePickerInputClassKey = 'root' | 'toLabelDelimiter';
-
-export const styles: MuiStyles<DateRangePickerInputClassKey> = (
-  theme,
-): StyleRules<DateRangePickerInputClassKey> => ({
-  root: {
-    display: 'flex',
-    alignItems: 'baseline',
-    [theme.breakpoints.down('xs')]: {
-      flexDirection: 'column',
-      alignItems: 'center',
-    },
-  },
-  toLabelDelimiter: {
-    margin: '8px 0',
-    [theme.breakpoints.up('sm')]: {
-      margin: '0 16px',
-    },
+const DateRangePickerInputRoot = styled(
+  'div',
+  {},
+  { skipSx: true },
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'baseline',
+  [theme.breakpoints.down('xs')]: {
+    flexDirection: 'column',
+    alignItems: 'center',
   },
-});
+}));
 
 export interface ExportedDateRangePickerInputProps
   extends Omit<ExportedDateInputProps<RangeInput<any>, DateRange<any>>, 'renderInput'> {
@@ -69,11 +61,10 @@ export interface DateRangeInputProps
  * @ignore - internal component.
  */
 const DateRangePickerInput = React.forwardRef(function DateRangePickerInput(
-  props: DateRangeInputProps & WithStyles<typeof styles>,
+  props: DateRangeInputProps,
   ref: React.Ref<HTMLDivElement>,
 ): JSX.Element {
   const {
-    classes,
     currentlySelectingRangeEnd,
     disableOpenPicker,
     endText,
@@ -181,10 +172,10 @@ const DateRangePickerInput = React.forwardRef(function DateRangePickerInput(
   });
 
   return (
-    <div onBlur={onBlur} className={classes.root} ref={ref}>
+    <DateRangePickerInputRoot onBlur={onBlur} ref={ref}>
       {renderInput(startInputProps, endInputProps)}
-    </div>
+    </DateRangePickerInputRoot>
   );
 });
 
-export default withStyles(styles, { name: 'MuiDateRangePickerInput' })(DateRangePickerInput);
+export default DateRangePickerInput;

From f4541c6eb033dad23b82ca95e1259fa982c4e7d9 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 May 2021 13:45:38 +0700
Subject: [PATCH 2/7] migrate to emotion

---
 .../DateRangePickerToolbar.tsx                | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx
index cf2461fc766797..8ebaf92cda5ccc 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -1,22 +1,14 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { MuiStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { generateUtilityClasses } from '@material-ui/unstyled';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 import { DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
 
-export const styles: MuiStyles<'root' | 'penIcon' | 'dateTextContainer'> = {
-  root: {},
-  penIcon: {
-    position: 'relative',
-    top: 4,
-  },
-  dateTextContainer: {
-    display: 'flex',
-  },
-};
+const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
 
 interface DateRangePickerToolbarProps
   extends CurrentlySelectingRangeEndProps,
@@ -31,11 +23,29 @@ interface DateRangePickerToolbarProps
   setCurrentlySelectingRangeEnd: (newSelectingEnd: 'start' | 'end') => void;
 }
 
+const DateRangePickerToolbarRoot = styled(
+  PickersToolbar,
+  {},
+  { skipSx: true },
+)({
+  [`& .${classes.penIcon}`]: {
+    position: 'relative',
+    top: 4,
+  },
+});
+
+const DateRangePickerToolbarContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+});
+
 /**
  * @ignore - internal component.
  */
-const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<typeof styles>> = ({
-  classes,
+const DateRangePickerToolbar = ({
   currentlySelectingRangeEnd,
   date: [start, end],
   endText,
@@ -45,7 +55,7 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
   toggleMobileKeyboardView,
   toolbarFormat,
   toolbarTitle = 'SELECT DATE RANGE',
-}) => {
+}: DateRangePickerToolbarProps) => {
   const utils = useUtils();
 
   const startDateValue = start
@@ -57,15 +67,14 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
     : endText;
 
   return (
-    <PickersToolbar
-      className={classes.root}
+    <DateRangePickerToolbarRoot
       toolbarTitle={toolbarTitle}
       isMobileKeyboardViewOpen={isMobileKeyboardViewOpen}
       toggleMobileKeyboardView={toggleMobileKeyboardView}
       isLandscape={false}
       penIconClassName={classes.penIcon}
     >
-      <div className={classes.dateTextContainer}>
+      <DateRangePickerToolbarContainer>
         <PickersToolbarButton
           variant={start !== null ? 'h5' : 'h6'}
           value={startDateValue}
@@ -79,9 +88,9 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
           selected={currentlySelectingRangeEnd === 'end'}
           onClick={() => setCurrentlySelectingRangeEnd('end')}
         />
-      </div>
-    </PickersToolbar>
+      </DateRangePickerToolbarContainer>
+    </DateRangePickerToolbarRoot>
   );
 };
 
-export default withStyles(styles, { name: 'MuiDateRangePickerToolbar' })(DateRangePickerToolbar);
+export default DateRangePickerToolbar;

From cd370c6c9436b9697a571fd7425b63460f6619d2 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 May 2021 13:55:35 +0700
Subject: [PATCH 3/7] migrate to emotion

---
 .../DateRangePickerViewDesktop.tsx            | 90 ++++++++++---------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
index c827476be5b2e0..35e64fcaec9ebd 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiStyles, StyleRules, withStyles, WithStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import { DateRange } from './RangeTypes';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { calculateRangePreview } from './date-range-manager';
@@ -45,34 +45,43 @@ interface DesktopDateRangeCalendarProps<TDate>
   currentlySelectingRangeEnd: 'start' | 'end';
 }
 
-type DateRangePickerViewDesktopClassKey =
-  | 'root'
-  | 'rangeCalendarContainer'
-  | 'calendar'
-  | 'arrowSwitcher';
-
-export const styles: MuiStyles<DateRangePickerViewDesktopClassKey> = (
-  theme,
-): StyleRules<DateRangePickerViewDesktopClassKey> => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-  rangeCalendarContainer: {
-    '&:not(:last-child)': {
-      borderRight: `2px solid ${theme.palette.divider}`,
-    },
-  },
-  calendar: {
-    minWidth: 312,
-    minHeight: 288,
-  },
-  arrowSwitcher: {
-    padding: '16px 16px 8px 16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+const DateRangePickerViewDesktopRoot = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+const DateRangePickerViewDesktopContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)(({ theme }) => ({
+  '&:not(:last-child)': {
+    borderRight: `2px solid ${theme.palette.divider}`,
   },
+}));
+
+const DateRangePickerViewDesktopCalendar = styled(
+  PickersCalendar,
+  {},
+  { skipSx: true },
+)({
+  minWidth: 312,
+  minHeight: 288,
+}) as typeof PickersCalendar;
+
+const DateRangePickerViewDesktopArrowSwitcher = styled(
+  PickersArrowSwitcher,
+  {},
+  { skipSx: true },
+)({
+  padding: '16px 16px 8px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
 });
 
 function getCalendarsArray(calendars: ExportedDesktopDateRangeCalendarProps<unknown>['calendars']) {
@@ -92,13 +101,10 @@ function getCalendarsArray(calendars: ExportedDesktopDateRangeCalendarProps<unkn
 /**
  * @ignore - internal component.
  */
-function DateRangePickerViewDesktop<TDate>(
-  props: DesktopDateRangeCalendarProps<TDate> & WithStyles<typeof styles>,
-) {
+function DateRangePickerViewDesktop<TDate>(props: DesktopDateRangeCalendarProps<TDate>) {
   const {
     calendars,
     changeMonth,
-    classes,
     components,
     componentsProps,
     currentlySelectingRangeEnd,
@@ -163,14 +169,13 @@ function DateRangePickerViewDesktop<TDate>(
   }, [changeMonth, currentMonth, utils]);
 
   return (
-    <div className={classes.root}>
+    <DateRangePickerViewDesktopRoot>
       {getCalendarsArray(calendars).map((_, index) => {
         const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
 
         return (
-          <div key={index} className={classes.rangeCalendarContainer}>
-            <PickersArrowSwitcher
-              className={classes.arrowSwitcher}
+          <DateRangePickerViewDesktopContainer key={index}>
+            <DateRangePickerViewDesktopArrowSwitcher
               onLeftClick={selectPreviousMonth}
               onRightClick={selectNextMonth}
               isLeftHidden={index !== 0}
@@ -183,13 +188,12 @@ function DateRangePickerViewDesktop<TDate>(
               rightArrowButtonText={rightArrowButtonText}
             >
               {utils.format(monthOnIteration, 'monthAndYear')}
-            </PickersArrowSwitcher>
-            <PickersCalendar<TDate>
+            </DateRangePickerViewDesktopArrowSwitcher>
+            <DateRangePickerViewDesktopCalendar<TDate>
               {...other}
               key={index}
               date={date}
               onFocusedDayChange={doNothing}
-              className={classes.calendar}
               onChange={handleDayChange}
               currentMonth={monthOnIteration}
               TransitionProps={CalendarTransitionProps}
@@ -206,13 +210,11 @@ function DateRangePickerViewDesktop<TDate>(
                 })
               }
             />
-          </div>
+          </DateRangePickerViewDesktopContainer>
         );
       })}
-    </div>
+    </DateRangePickerViewDesktopRoot>
   );
 }
 
-export default withStyles(styles, { name: 'MuiDateRangePickerViewDesktop' })(
-  DateRangePickerViewDesktop,
-) as <TDate>(props: DesktopDateRangeCalendarProps<TDate>) => JSX.Element;
+export default DateRangePickerViewDesktop;

From aeb397dce29963ce64d338e6ef95e641674fe678 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Sun, 16 May 2021 23:36:25 +0700
Subject: [PATCH 4/7] fix type issue by casting unknown

---
 .../material-ui-lab/src/DateRangePicker/DateRangePicker.tsx   | 4 ++--
 .../src/DesktopDateRangePicker/DesktopDateRangePicker.tsx     | 2 +-
 .../src/MobileDateRangePicker/MobileDateRangePicker.tsx       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
index 1945da8957c4b5..3787be770e5c74 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
@@ -55,8 +55,8 @@ interface BaseDateRangePickerProps<TDate>
   value: RangeInput<TDate>;
 }
 
-const KeyboardDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
-const PureDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
+const KeyboardDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
+const PureDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
 
 const rangePickerValueManager: PickerStateValueManager<any, any> = {
   emptyValue: [null, null],
diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
index 76498ec8087bc5..e167c6e93e76da 100644
--- a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
+++ b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
@@ -62,7 +62,7 @@ interface BaseDateRangePickerProps<TDate>
   value: RangeInput<TDate>;
 }
 
-const KeyboardDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
+const KeyboardDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
 
 const rangePickerValueManager: PickerStateValueManager<any, any> = {
   emptyValue: [null, null],
diff --git a/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx
index d915a7634e84d9..bf5ef18a1637a4 100644
--- a/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx
+++ b/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -61,7 +61,7 @@ interface BaseDateRangePickerProps<TDate>
   value: RangeInput<TDate>;
 }
 
-const PureDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
+const PureDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
 
 const rangePickerValueManager: PickerStateValueManager<any, any> = {
   emptyValue: [null, null],

From 35c8965eb46719c20c36fed67e751a56c293090f Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 17 May 2021 09:58:29 +0700
Subject: [PATCH 5/7] migrate to emotion

---
 .../src/CalendarPicker/PickersCalendar.tsx    | 135 +++++++++---------
 1 file changed, 70 insertions(+), 65 deletions(-)

diff --git a/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
index 7907f2b9463710..f133a4d67e5250 100644
--- a/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
+++ b/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
-import { StyleRules, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
 import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
@@ -58,59 +57,72 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
   TransitionProps?: Partial<SlideTransitionProps>;
 }
 
-export type PickersCalendarClassKey =
-  | 'root'
-  | 'loadingContainer'
-  | 'weekContainer'
-  | 'week'
-  | 'daysHeader'
-  | 'weekDayLabel';
-
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
-export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
-  root: {
-    minHeight: weeksContainerHeight,
-  },
-  loadingContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: weeksContainerHeight,
-  },
-  weekContainer: {
-    overflow: 'hidden',
-  },
-  week: {
-    margin: `${DAY_MARGIN}px 0`,
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  daysHeader: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  weekDayLabel: {
-    width: 36,
-    height: 40,
-    margin: '0 2px',
-    textAlign: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.palette.text.secondary,
-  },
+
+const PickersCalendarDayHeader = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const PickersCalendarWeekDayLabel = styled(
+  Typography,
+  {},
+  { skipSx: true },
+)(({ theme }) => ({
+  width: 36,
+  height: 40,
+  margin: '0 2px',
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+const PickersCalendarLoadingContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: weeksContainerHeight,
+});
+
+const PickersCalendarSlideTransition = styled(
+  SlideTransition,
+  {},
+  { skipSx: true },
+)({
+  minHeight: weeksContainerHeight,
+});
+
+const PickersCalendarWeekContainer = styled('div', {}, { skipSx: true })({ overflow: 'hidden' });
+
+const PickersCalendarWeek = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  margin: `${DAY_MARGIN}px 0`,
+  display: 'flex',
+  justifyContent: 'center',
 });
 
 /**
  * @ignore - do not document.
  */
-function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<typeof styles>) {
+function PickersCalendar<TDate>(props: PickersCalendarProps<TDate>) {
   const {
     allowKeyboardControl,
     allowSameDateSelection,
     onFocusedDayChange: changeFocusedDay,
-    classes,
     className,
     currentMonth,
     date,
@@ -148,33 +160,28 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
 
   return (
     <React.Fragment>
-      <div className={classes.daysHeader}>
+      <PickersCalendarDayHeader>
         {utils.getWeekdays().map((day, i) => (
-          <Typography
-            aria-hidden
-            key={day + i.toString()}
-            variant="caption"
-            className={classes.weekDayLabel}
-          >
+          <PickersCalendarWeekDayLabel aria-hidden key={day + i.toString()} variant="caption">
             {day.charAt(0).toUpperCase()}
-          </Typography>
+          </PickersCalendarWeekDayLabel>
         ))}
-      </div>
+      </PickersCalendarDayHeader>
 
       {loading ? (
-        <div className={classes.loadingContainer}>{renderLoading()}</div>
+        <PickersCalendarLoadingContainer>{renderLoading()}</PickersCalendarLoadingContainer>
       ) : (
-        <SlideTransition
+        <PickersCalendarSlideTransition
           transKey={currentMonthNumber}
           onExited={onMonthSwitchingAnimationEnd}
           reduceAnimations={reduceAnimations}
           slideDirection={slideDirection}
-          className={clsx(classes.root, className)}
+          className={className}
           {...TransitionProps}
         >
-          <div data-mui-test="pickers-calendar" role="grid" className={classes.weekContainer}>
+          <PickersCalendarWeekContainer data-mui-test="pickers-calendar" role="grid">
             {utils.getWeekArray(currentMonth).map((week) => (
-              <div role="row" key={`week-${week[0]}`} className={classes.week}>
+              <PickersCalendarWeek role="row" key={`week-${week[0]}`}>
                 {week.map((day) => {
                   const pickersDayProps: PickersDayProps<TDate> = {
                     key: (day as any)?.toString(),
@@ -206,15 +213,13 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
                     </div>
                   );
                 })}
-              </div>
+              </PickersCalendarWeek>
             ))}
-          </div>
-        </SlideTransition>
+          </PickersCalendarWeekContainer>
+        </PickersCalendarSlideTransition>
       )}
     </React.Fragment>
   );
 }
 
-export default withStyles(styles, { name: 'PrivatePickersCalendar' })(PickersCalendar) as <TDate>(
-  props: PickersCalendarProps<TDate>,
-) => JSX.Element;
+export default PickersCalendar;

From f15ab024ae416eb1fdec661c98c18f6c61ad8167 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 17 May 2021 10:05:01 +0700
Subject: [PATCH 6/7] revert some code due to dependency

---
 .../src/CalendarPicker/PickersCalendar.tsx    | 47 ++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
index f133a4d67e5250..7bab3b0dc7afbb 100644
--- a/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
+++ b/packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { StyleRules, Theme, experimentalStyled as styled } from '@material-ui/core/styles';
 import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
 import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
@@ -59,6 +59,51 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
 
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
 
+// TODO remove PickersCalendarClassKey in CalendarPickerSkeleton migration
+export type PickersCalendarClassKey =
+  | 'root'
+  | 'loadingContainer'
+  | 'weekContainer'
+  | 'week'
+  | 'daysHeader'
+  | 'weekDayLabel';
+
+// TODO remove styles in CalendarPickerSkeleton migration
+export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
+  root: {
+    minHeight: weeksContainerHeight,
+  },
+  loadingContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: weeksContainerHeight,
+  },
+  weekContainer: {
+    overflow: 'hidden',
+  },
+  week: {
+    margin: `${DAY_MARGIN}px 0`,
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  daysHeader: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  weekDayLabel: {
+    width: 36,
+    height: 40,
+    margin: '0 2px',
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: theme.palette.text.secondary,
+  },
+});
+
 const PickersCalendarDayHeader = styled(
   'div',
   {},

From b25f23be2bb72459846f180c0b25a8d6ffafa73a Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 18 May 2021 14:30:13 +0200
Subject: [PATCH 7/7] Update
 packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx

---
 .../src/DateRangePicker/DateRangePickerViewDesktop.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
index 35e64fcaec9ebd..0f12c0bfab712b 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -59,7 +59,7 @@ const DateRangePickerViewDesktopContainer = styled(
   {},
   { skipSx: true },
 )(({ theme }) => ({
-  '&:not(:last-child)': {
+  '&:not(:last-of-type)': {
     borderRight: `2px solid ${theme.palette.divider}`,
   },
 }));