Use explicit type declarations instead

mui · Jan 2, 2021 · 8923918 · 8923918
1 parent 1d116c2
commit 8923918
Show file tree

Hide file tree

Showing 35 changed files with 646 additions and 536 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,8 +4,10 @@ const forbidTopLevelMessage = [
   'Prefer one level nested imports to avoid bundling everything in dev mode',
   'See https://github.com/mui-org/material-ui/pull/24147 for the kind of win it can unlock.',
 ].join('\n');
+// This only applies to packages published from this monorepo.
+// If you build a library around `@material-ui/core` you can safely use `createStyles` without running into the same issue as we are.
 const forbidCreateStylesMessage =
-  'Use `as const` assertions instead. ' +
+  'Use `Styles<Theme, Props, ClassKey>` instead if the styles are exported. Otherwise use `as const` assertions. ' +
   '`createStyles` will lead to inlined, at-compile-time-resolved type-imports. ' +
   'See https://github.com/microsoft/TypeScript/issues/36097#issuecomment-578324386 for more information';
 

diff --git a/packages/material-ui-lab/src/ClockPicker/Clock.tsx b/packages/material-ui-lab/src/ClockPicker/Clock.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import { WithStyles, Theme, withStyles } from '@material-ui/core/styles';
+import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
 import ClockPointer from './ClockPointer';
 import { useUtils, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
 import { ClockViewType } from '../internal/pickers/constants/ClockType';
@@ -34,68 +34,74 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
   ) => string;
 }
 
-export const styles = (theme: Theme) =>
-  ({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      margin: theme.spacing(2),
-    },
-    clock: {
-      backgroundColor: 'rgba(0,0,0,.07)',
-      borderRadius: '50%',
-      height: 220,
-      width: 220,
-      flexShrink: 0,
-      position: 'relative',
-      pointerEvents: 'none',
-    },
-    squareMask: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      pointerEvents: 'auto',
-      outline: 0,
-      // Disable scroll capabilities.
-      touchAction: 'none',
-      userSelect: 'none',
-      '&:active': {
-        cursor: 'move',
-      },
-    },
-    pin: {
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-      backgroundColor: theme.palette.primary.main,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-    amButton: {
-      zIndex: 1,
-      left: 8,
-      position: 'absolute',
-      bottom: 8,
-    },
-    pmButton: {
-      zIndex: 1,
-      position: 'absolute',
-      bottom: 8,
-      right: 8,
+export type ClockClassKey =
+  | 'root'
+  | 'clock'
+  | 'squareMask'
+  | 'pin'
+  | 'amButton'
+  | 'pmButton'
+  | 'meridiemButtonSelected';
+
+export const styles: MuiStyles<ClockClassKey> = (theme): StyleRules<ClockClassKey> => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(2),
+  },
+  clock: {
+    backgroundColor: 'rgba(0,0,0,.07)',
+    borderRadius: '50%',
+    height: 220,
+    width: 220,
+    flexShrink: 0,
+    position: 'relative',
+    pointerEvents: 'none',
+  },
+  squareMask: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'auto',
+    outline: 0,
+    // Disable scroll capabilities.
+    touchAction: 'none',
+    userSelect: 'none',
+    '&:active': {
+      cursor: 'move',
     },
-    meridiemButtonSelected: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-      '&:hover': {
-        backgroundColor: theme.palette.primary.light,
-      },
+  },
+  pin: {
+    width: 6,
+    height: 6,
+    borderRadius: '50%',
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+  amButton: {
+    zIndex: 1,
+    left: 8,
+    position: 'absolute',
+    bottom: 8,
+  },
+  pmButton: {
+    zIndex: 1,
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+  },
+  meridiemButtonSelected: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light,
     },
-  } as const);
-
-export type ClockClassKey = keyof WithStyles<typeof styles>['classes'];
+  },
+});
 
 /**
  * @ignore - internal component.

diff --git a/packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx b/packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { WithStyles, withStyles, Theme } from '@material-ui/core/styles';
+import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
 
 export interface ClockNumberProps {
@@ -12,38 +12,37 @@ export interface ClockNumberProps {
   'aria-label': string;
 }
 
-export const styles = (theme: Theme) =>
-  ({
-    root: {
-      width: CLOCK_HOUR_WIDTH,
-      height: CLOCK_HOUR_WIDTH,
-      position: 'absolute',
-      left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: '50%',
-      color: theme.palette.text.primary,
-      '&:focused': {
-        backgroundColor: theme.palette.background.paper,
-      },
-      '&$selected': {
-        color: theme.palette.primary.contrastText,
-      },
-      '&$disabled': {
-        pointerEvents: 'none',
-        color: theme.palette.text.disabled,
-      },
+export type ClockNumberClassKey = 'root' | 'selected' | 'disabled' | 'inner';
+
+export const styles: MuiStyles<ClockNumberClassKey> = (theme): StyleRules<ClockNumberClassKey> => ({
+  root: {
+    width: CLOCK_HOUR_WIDTH,
+    height: CLOCK_HOUR_WIDTH,
+    position: 'absolute',
+    left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    color: theme.palette.text.primary,
+    '&:focused': {
+      backgroundColor: theme.palette.background.paper,
     },
-    selected: {},
-    disabled: {},
-    inner: {
-      ...theme.typography.body2,
-      color: theme.palette.text.secondary,
+    '&$selected': {
+      color: theme.palette.primary.contrastText,
     },
-  } as const);
-
-export type ClockNumberClassKey = keyof WithStyles<typeof styles>['classes'];
+    '&$disabled': {
+      pointerEvents: 'none',
+      color: theme.palette.text.disabled,
+    },
+  },
+  selected: {},
+  disabled: {},
+  inner: {
+    ...theme.typography.body2,
+    color: theme.palette.text.secondary,
+  },
+});
 
 /**
  * @ignore - internal component.

diff --git a/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx b/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { WithStyles, withStyles } from '@material-ui/core/styles';
+import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
 import Clock from './Clock';
 import { pipe } from '../internal/pickers/utils';
 import { useUtils, useNow, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
@@ -80,13 +80,13 @@ export interface ClockPickerProps<TDate>
   showViewSwitcher?: boolean;
 }
 
-export const styles = {
+export const styles: MuiStyles<'arrowSwitcher'> = {
   arrowSwitcher: {
     position: 'absolute',
     right: 12,
     top: 15,
   },
-} as const;
+};
 
 const getDefaultClockLabelText = <TDate extends any>(
   view: 'hours' | 'minutes' | 'seconds',

diff --git a/packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx b/packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx
@@ -1,39 +1,40 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { withStyles, Theme, WithStyles } from '@material-ui/core/styles';
+import { StyleRules, MuiStyles, withStyles, WithStyles } from '@material-ui/core/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
 import { ClockViewType } from '../internal/pickers/constants/ClockType';
 
-export const styles = (theme: Theme) =>
-  ({
-    root: {
-      width: 2,
-      backgroundColor: theme.palette.primary.main,
-      position: 'absolute',
-      left: 'calc(50% - 1px)',
-      bottom: '50%',
-      transformOrigin: 'center bottom 0px',
-    },
-    animateTransform: {
-      transition: theme.transitions.create(['transform', 'height']),
-    },
-    thumb: {
-      width: 4,
-      height: 4,
-      backgroundColor: theme.palette.primary.contrastText,
-      borderRadius: '50%',
-      position: 'absolute',
-      top: -21,
-      left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
-      border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
-      boxSizing: 'content-box',
-    },
-    noPoint: {
-      backgroundColor: theme.palette.primary.main,
-    },
-  } as const);
+export type ClockPointerClassKey = 'root' | 'animateTransform' | 'thumb' | 'noPoint';
 
-export type ClockPointerClassKey = keyof WithStyles<typeof styles>['classes'];
+export const styles: MuiStyles<ClockPointerClassKey> = (
+  theme,
+): StyleRules<ClockPointerClassKey> => ({
+  root: {
+    width: 2,
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    left: 'calc(50% - 1px)',
+    bottom: '50%',
+    transformOrigin: 'center bottom 0px',
+  },
+  animateTransform: {
+    transition: theme.transitions.create(['transform', 'height']),
+  },
+  thumb: {
+    width: 4,
+    height: 4,
+    backgroundColor: theme.palette.primary.contrastText,
+    borderRadius: '50%',
+    position: 'absolute',
+    top: -21,
+    left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
+    border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
+    boxSizing: 'content-box',
+  },
+  noPoint: {
+    backgroundColor: theme.palette.primary.main,
+  },
+});
 
 export interface ClockPointerProps
   extends React.HTMLProps<HTMLDivElement>,

diff --git a/packages/material-ui-lab/src/DatePicker/DatePickerToolbar.tsx b/packages/material-ui-lab/src/DatePicker/DatePickerToolbar.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
-import { WithStyles, withStyles } from '@material-ui/core/styles';
+import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from '../internal/pickers/date-utils';
 import { DatePickerView } from '../internal/pickers/typings/Views';
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 
-export const styles = {
+export type DatePickerToolbarClassKey = 'root' | 'dateTitleLandscape' | 'penIcon';
+
+export const styles: MuiStyles<DatePickerToolbarClassKey> = {
   root: {},
   dateTitleLandscape: {
     margin: 'auto 16px auto auto',
@@ -17,8 +19,7 @@ export const styles = {
     position: 'relative',
     top: 4,
   },
-} as const;
-export type DatePickerToolbarClassKey = keyof WithStyles<typeof styles>['classes'];
+};
 
 /**
  * @ignore - internal component.