[DateRangePicker] Migrate internal components to emotion

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 { 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';
@@ -58,6 +57,9 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
   TransitionProps?: Partial<SlideTransitionProps>;
 }
 
+const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
+
+// TODO remove PickersCalendarClassKey in CalendarPickerSkeleton migration
 export type PickersCalendarClassKey =
   | 'root'
   | 'loadingContainer'
@@ -66,7 +68,7 @@ export type PickersCalendarClassKey =
   | 'daysHeader'
   | 'weekDayLabel';
 
-const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
+// TODO remove styles in CalendarPickerSkeleton migration
 export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
   root: {
     minHeight: weeksContainerHeight,
@@ -102,15 +104,70 @@ export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
   },
 });
 
+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 +205,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 +258,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;

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],

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;

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;