From 892391865289f11280f169e720b18e3d4c369dbf Mon Sep 17 00:00:00 2001 From: eps1lon Date: Sat, 2 Jan 2021 23:10:17 +0100 Subject: [PATCH] Use explicit type declarations instead --- .eslintrc.js | 4 +- .../material-ui-lab/src/ClockPicker/Clock.tsx | 128 ++++++++-------- .../src/ClockPicker/ClockNumber.tsx | 61 ++++---- .../src/ClockPicker/ClockPicker.tsx | 6 +- .../src/ClockPicker/ClockPointer.tsx | 61 ++++---- .../src/DatePicker/DatePickerToolbar.tsx | 9 +- .../DateRangePicker/DateRangePickerInput.tsx | 35 +++-- .../DateRangePickerToolbar.tsx | 6 +- .../DateRangePickerViewDesktop.tsx | 47 +++--- .../DateRangePickerDay/DateRangePickerDay.tsx | 137 ++++++++++-------- .../src/DateTimePicker/DateTimePickerTabs.tsx | 10 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 8 +- .../src/DayPicker/DayPicker.tsx | 10 +- .../src/DayPicker/PickersCalendar.tsx | 81 ++++++----- .../src/DayPicker/PickersCalendarHeader.tsx | 87 ++++++----- .../DayPicker/PickersFadeTransitionGroup.tsx | 64 ++++---- .../src/DayPicker/PickersSlideTransition.tsx | 20 ++- .../src/MonthPicker/MonthPicker.tsx | 10 +- .../src/MonthPicker/PickersMonth.tsx | 10 +- .../PickersCalendarSkeleton.tsx | 38 ++--- .../src/PickersDay/PickersDay.tsx | 113 ++++++++------- .../src/TimePicker/TimePickerToolbar.tsx | 18 ++- .../material-ui-lab/src/Timeline/Timeline.tsx | 10 +- .../src/YearPicker/PickersYear.tsx | 15 +- .../src/YearPicker/YearPicker.tsx | 10 +- .../src/internal/pickers/Picker/Picker.tsx | 10 +- .../internal/pickers/PickersArrowSwitcher.tsx | 30 ++-- .../internal/pickers/PickersModalDialog.tsx | 15 +- .../src/internal/pickers/PickersPopper.tsx | 31 ++-- .../src/internal/pickers/PickersToolbar.tsx | 45 +++--- .../internal/pickers/PickersToolbarButton.tsx | 10 +- .../internal/pickers/PickersToolbarText.tsx | 9 +- .../pickers/wrappers/StaticWrapper.tsx | 23 +-- packages/material-ui/src/styles/index.d.ts | 2 + .../material-ui/src/styles/withStyles.d.ts | 9 ++ 35 files changed, 646 insertions(+), 536 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9fe494e902e61f..69c7b72935feb1 100644 --- 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` 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 index 8e67609b5c09fb..ea8fbc2e6b100c 100644 --- 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 extends ReturnType { ) => 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 = (theme): StyleRules => ({ + 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['classes']; + }, +}); /** * @ignore - internal component. diff --git a/packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx b/packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx index db4653a8417c42..42bfe4ac16868f 100644 --- 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 = (theme): StyleRules => ({ + 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['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 index c39344b53acd2b..324cf935599a3b 100644 --- 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 showViewSwitcher?: boolean; } -export const styles = { +export const styles: MuiStyles<'arrowSwitcher'> = { arrowSwitcher: { position: 'absolute', right: 12, top: 15, }, -} as const; +}; const getDefaultClockLabelText = ( view: 'hours' | 'minutes' | 'seconds', diff --git a/packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx b/packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx index ff077443d958bf..0f794c06f8f13d 100644 --- 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['classes']; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + 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, diff --git a/packages/material-ui-lab/src/DatePicker/DatePickerToolbar.tsx b/packages/material-ui-lab/src/DatePicker/DatePickerToolbar.tsx index e1a215f51289ef..dd6905d5196626 100644 --- 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 = { 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['classes']; +}; /** * @ignore - internal component. diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx index b21a1d14651fd0..73543df105e7f8 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 { withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, withStyles, WithStyles } 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'; @@ -8,23 +8,26 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria import { mergeRefs, executeInTheNextEventLoopTick } from '../internal/pickers/utils'; import { DateInputProps, MuiTextFieldProps } from '../internal/pickers/PureDateInput'; -export const styles = (theme: Theme) => - ({ - root: { - display: 'flex', - alignItems: 'baseline', - [theme.breakpoints.down('xs')]: { - flexDirection: 'column', - alignItems: 'center', - }, +export type DateRangePickerInputClassKey = 'root' | 'toLabelDelimiter'; + +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + display: 'flex', + alignItems: 'baseline', + [theme.breakpoints.down('xs')]: { + flexDirection: 'column', + alignItems: 'center', }, - toLabelDelimiter: { - margin: '8px 0', - [theme.breakpoints.up('sm')]: { - margin: '0 16px', - }, + }, + toLabelDelimiter: { + margin: '8px 0', + [theme.breakpoints.up('sm')]: { + margin: '0 16px', }, - } as const); + }, +}); export interface ExportedDateRangePickerInputProps { /** diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx index 21215d99111b40..303da1347c93b8 100644 --- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; 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 PickersToolbarButton from '../internal/pickers/PickersToolbarButton'; import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker'; import { DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes'; -export const styles = { +export const styles: MuiStyles<'root' | 'penIcon' | 'dateTextContainer'> = { root: {}, penIcon: { position: 'relative', @@ -16,7 +16,7 @@ export const styles = { dateTextContainer: { display: 'flex', }, -} as const; +}; interface DateRangePickerToolbarProps extends CurrentlySelectingRangeEndProps, diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx index 34842cde9194bf..c77c0c448b8dcb 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 { withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, withStyles, WithStyles } from '@material-ui/core/styles'; import { DateRange } from './RangeTypes'; import { useUtils } from '../internal/pickers/hooks/useUtils'; import { calculateRangePreview } from './date-range-manager'; @@ -44,28 +44,31 @@ interface DesktopDateRangeCalendarProps currentlySelectingRangeEnd: 'start' | 'end'; } -export const styles = (theme: Theme) => - ({ - root: { - display: 'flex', - flexDirection: 'row', +type DateRangePickerViewDesktop = 'root' | 'rangeCalendarContainer' | 'calendar' | 'arrowSwitcher'; + +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + display: 'flex', + flexDirection: 'row', + }, + rangeCalendarContainer: { + '&:not(:last-child)': { + borderRight: `2px solid ${theme.palette.divider}`, }, - 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', - }, - } as const); + }, + calendar: { + minWidth: 312, + minHeight: 288, + }, + arrowSwitcher: { + padding: '16px 16px 8px 16px', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + }, +}); function getCalendarsArray(calendars: ExportedDesktopDateRangeCalendarProps['calendars']) { switch (calendars) { diff --git a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx index f368e59ac6abbf..a09498d01da0fa 100644 --- a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { withStyles, WithStyles, alpha, Theme } from '@material-ui/core/styles'; +import { MuiStyles, withStyles, WithStyles, alpha, StyleRules } from '@material-ui/core/styles'; import { DAY_MARGIN } from '../internal/pickers/constants/dimensions'; import { useUtils } from '../internal/pickers/hooks/useUtils'; import PickersDay, { PickersDayProps, areDayPropsEqual } from '../PickersDay/PickersDay'; @@ -25,74 +25,89 @@ const startBorderStyle = { borderBottomLeftRadius: '50%', }; -const styles = (theme: Theme) => - ({ - root: { - '&:first-child $rangeIntervalDayPreview': { - ...startBorderStyle, - borderLeftColor: theme.palette.divider, - }, - '&:last-child $rangeIntervalDayPreview': { - ...endBorderStyle, - borderRightColor: theme.palette.divider, - }, - }, - rangeIntervalDayHighlight: { - borderRadius: 0, - color: theme.palette.primary.contrastText, - backgroundColor: alpha(theme.palette.primary.light, 0.6), - '&:first-child': startBorderStyle, - '&:last-child': endBorderStyle, - }, - rangeIntervalDayHighlightStart: { +type DateRangePickerDayClassKey = + | 'root' + | 'rangeIntervalDayHighlight' + | 'rangeIntervalDayHighlightStart' + | 'rangeIntervalDayHighlightEnd' + | 'day' + | 'dayOutsideRangeInterval' + | 'dayInsideRangeInterval' + | 'notSelectedDate' + | 'rangeIntervalPreview' + | 'rangeIntervalDayPreview' + | 'rangeIntervalDayPreviewStart' + | 'rangeIntervalDayPreviewEnd'; + +const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + '&:first-child $rangeIntervalDayPreview': { ...startBorderStyle, - paddingLeft: 0, - marginLeft: DAY_MARGIN / 2, + borderLeftColor: theme.palette.divider, }, - rangeIntervalDayHighlightEnd: { + '&:last-child $rangeIntervalDayPreview': { ...endBorderStyle, - paddingRight: 0, - marginRight: DAY_MARGIN / 2, - }, - day: { - // Required to overlap preview border - transform: 'scale(1.1)', - '& > *': { - transform: 'scale(0.9)', - }, + borderRightColor: theme.palette.divider, }, - dayOutsideRangeInterval: { - '&:hover': { - border: `1px solid ${theme.palette.grey[500]}`, - }, + }, + rangeIntervalDayHighlight: { + borderRadius: 0, + color: theme.palette.primary.contrastText, + backgroundColor: alpha(theme.palette.primary.light, 0.6), + '&:first-child': startBorderStyle, + '&:last-child': endBorderStyle, + }, + rangeIntervalDayHighlightStart: { + ...startBorderStyle, + paddingLeft: 0, + marginLeft: DAY_MARGIN / 2, + }, + rangeIntervalDayHighlightEnd: { + ...endBorderStyle, + paddingRight: 0, + marginRight: DAY_MARGIN / 2, + }, + day: { + // Required to overlap preview border + transform: 'scale(1.1)', + '& > *': { + transform: 'scale(0.9)', }, - dayInsideRangeInterval: { - color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)), + }, + dayOutsideRangeInterval: { + '&:hover': { + border: `1px solid ${theme.palette.grey[500]}`, }, - notSelectedDate: { - backgroundColor: 'transparent', - }, - rangeIntervalPreview: { - // replace default day component margin with transparent border to avoid jumping on preview - border: '2px solid transparent', + }, + dayInsideRangeInterval: { + color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)), + }, + notSelectedDate: { + backgroundColor: 'transparent', + }, + rangeIntervalPreview: { + // replace default day component margin with transparent border to avoid jumping on preview + border: '2px solid transparent', + }, + rangeIntervalDayPreview: { + borderRadius: 0, + border: `2px dashed ${theme.palette.divider}`, + borderLeftColor: 'transparent', + borderRightColor: 'transparent', + '&$rangeIntervalDayPreviewStart': { + borderLeftColor: theme.palette.divider, + ...startBorderStyle, }, - rangeIntervalDayPreview: { - borderRadius: 0, - border: `2px dashed ${theme.palette.divider}`, - borderLeftColor: 'transparent', - borderRightColor: 'transparent', - '&$rangeIntervalDayPreviewStart': { - borderLeftColor: theme.palette.divider, - ...startBorderStyle, - }, - '&$rangeIntervalDayPreviewEnd': { - borderRightColor: theme.palette.divider, - ...endBorderStyle, - }, + '&$rangeIntervalDayPreviewEnd': { + borderRightColor: theme.palette.divider, + ...endBorderStyle, }, - rangeIntervalDayPreviewStart: {}, - rangeIntervalDayPreviewEnd: {}, - } as const); + }, + rangeIntervalDayPreviewStart: {}, + rangeIntervalDayPreviewEnd: {}, +}); /** * @ignore - do not document. diff --git a/packages/material-ui-lab/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/material-ui-lab/src/DateTimePicker/DateTimePickerTabs.tsx index 386744507fdc01..6c700692d553dd 100644 --- a/packages/material-ui-lab/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/material-ui-lab/src/DateTimePicker/DateTimePickerTabs.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import Paper from '@material-ui/core/Paper'; -import { WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles'; +import { MuiStyles, WithStyles, withStyles, useTheme, StyleRules } from '@material-ui/core/styles'; import TimeIcon from '../internal/svg-icons/Time'; import DateRangeIcon from '../internal/svg-icons/DateRange'; import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext'; @@ -32,7 +32,11 @@ export interface DateTimePickerTabsProps { view: DateTimePickerView; } -export const styles = (theme: Theme) => { +export type DateTimePickerTabsClassKey = 'root' | 'modeDesktop' | 'tabs'; + +export const styles: MuiStyles = ( + theme, +): StyleRules => { const tabsBackground = theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.background.default; @@ -48,8 +52,6 @@ export const styles = (theme: Theme) => { }; }; -export type DateTimePickerTabsClassKey = keyof WithStyles['classes']; - /** * @ignore - internal component. */ diff --git a/packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx index 2b51df4c40327e..21b8513ab8378b 100644 --- a/packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { WithStyles, withStyles } from '@material-ui/core/styles'; +import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles'; import PickersToolbarText from '../internal/pickers/PickersToolbarText'; import PickersToolbar from '../internal/pickers/PickersToolbar'; import ToolbarButton from '../internal/pickers/PickersToolbarButton'; @@ -9,7 +9,9 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker'; import { DateTimePickerView } from '../internal/pickers/typings/Views'; -export const styles = { +export const styles: MuiStyles< + 'root' | 'separator' | 'timeContainer' | 'dateContainer' | 'timeTypography' | 'penIcon' +> = { root: { paddingLeft: 16, paddingRight: 16, @@ -33,7 +35,7 @@ export const styles = { top: 8, right: 8, }, -} as const; +}; export type DateTimePickerToolbarClassKey = keyof WithStyles['classes']; diff --git a/packages/material-ui-lab/src/DayPicker/DayPicker.tsx b/packages/material-ui-lab/src/DayPicker/DayPicker.tsx index 02dcf83a9c4ef4..f07d3ea86ac93d 100644 --- a/packages/material-ui-lab/src/DayPicker/DayPicker.tsx +++ b/packages/material-ui-lab/src/DayPicker/DayPicker.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 clsx from 'clsx'; import MonthPicker from '../MonthPicker/MonthPicker'; import { useCalendarState } from './useCalendarState'; @@ -63,7 +63,9 @@ export type ExportedDayPickerProps = Omit< | 'className' >; -export const styles = { +export type DayPickerClassKey = 'root' | 'viewTransitionContainer' | 'fullHeightContainer'; + +export const styles: MuiStyles = { root: { display: 'flex', flexDirection: 'column', @@ -79,9 +81,7 @@ export const styles = { minHeight: (DAY_SIZE + DAY_MARGIN * 4) * 7, height: '100%', }, -} as const; - -export type DayPickerClassKey = keyof WithStyles['classes']; +}; export const defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent); diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx index 086f9de11330b1..7de9df91d3af60 100644 --- a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx +++ b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; -import { WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles'; +import { StyleRules, WithStyles, withStyles, useTheme, Theme } 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,44 +59,49 @@ export interface PickersCalendarProps extends ExportedCalendarProps - ({ - 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, - }, - } as const); +export type PickersCalendarClassKey = + | 'root' + | 'loadingContainer' + | 'weekContainer' + | 'week' + | 'daysHeader' + | 'weekDayLabel'; -export type PickersCalendarClassKey = keyof WithStyles['classes']; +const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6; +export const styles = (theme: Theme): StyleRules => ({ + 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, + }, +}); /** * @ignore - do not document. diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx index 741d290601e61d..644a4419236271 100644 --- a/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx +++ b/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Fade from '@material-ui/core/Fade'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { WithStyles, withStyles, StyleRules, MuiStyles } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import { SlideDirection } from './PickersSlideTransition'; import { useUtils } from '../internal/pickers/hooks/useUtils'; @@ -59,46 +59,53 @@ export interface PickersCalendarHeaderProps onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; } -export const styles = (theme: Theme) => - ({ - root: { - display: 'flex', - alignItems: 'center', - marginTop: 16, - marginBottom: 8, - paddingLeft: 24, - paddingRight: 12, - // prevent jumping in safari - maxHeight: 30, - minHeight: 30, - }, - yearSelectionSwitcher: { - marginRight: 'auto', - }, - switchView: { - willChange: 'transform', - transition: theme.transitions.create('transform'), - transform: 'rotate(0deg)', - }, - switchViewActive: { - transform: 'rotate(180deg)', - }, - label: { - display: 'flex', - maxHeight: 30, - overflow: 'hidden', - alignItems: 'center', - cursor: 'pointer', - marginRight: 'auto', - ...theme.typography.body1, - fontWeight: theme.typography.fontWeightMedium, - }, - labelItem: { - marginRight: 6, - }, - } as const); +export type PickersCalendarHeaderClassKey = + | 'root' + | 'yearSelectionSwitcher' + | 'switchView' + | 'switchViewActive' + | 'label' + | 'labelItem'; -export type PickersCalendarHeaderClassKey = keyof WithStyles['classes']; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + display: 'flex', + alignItems: 'center', + marginTop: 16, + marginBottom: 8, + paddingLeft: 24, + paddingRight: 12, + // prevent jumping in safari + maxHeight: 30, + minHeight: 30, + }, + yearSelectionSwitcher: { + marginRight: 'auto', + }, + switchView: { + willChange: 'transform', + transition: theme.transitions.create('transform'), + transform: 'rotate(0deg)', + }, + switchViewActive: { + transform: 'rotate(180deg)', + }, + label: { + display: 'flex', + maxHeight: 30, + overflow: 'hidden', + alignItems: 'center', + cursor: 'pointer', + marginRight: 'auto', + ...theme.typography.body1, + fontWeight: theme.typography.fontWeightMedium, + }, + labelItem: { + marginRight: 6, + }, +}); function getSwitchingViewAriaText(view: DatePickerView) { return view === 'year' diff --git a/packages/material-ui-lab/src/DayPicker/PickersFadeTransitionGroup.tsx b/packages/material-ui-lab/src/DayPicker/PickersFadeTransitionGroup.tsx index 387171848d91c8..fb9367668e01bb 100644 --- a/packages/material-ui-lab/src/DayPicker/PickersFadeTransitionGroup.tsx +++ b/packages/material-ui-lab/src/DayPicker/PickersFadeTransitionGroup.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, WithStyles, withStyles, StyleRules } from '@material-ui/core/styles'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; interface FadeTransitionProps { @@ -10,35 +10,41 @@ interface FadeTransitionProps { children: React.ReactElement; } -const animationDuration = 500; -export const styles = (theme: Theme) => - ({ - root: { - display: 'block', - position: 'relative', - }, - fadeEnter: { - willChange: 'transform', - opacity: 0, - }, - fadeEnterActive: { - opacity: 1, - transition: theme.transitions.create('opacity', { - duration: animationDuration, - }), - }, - fadeExit: { - opacity: 1, - }, - fadeExitActive: { - opacity: 0, - transition: theme.transitions.create('opacity', { - duration: animationDuration / 2, - }), - }, - } as const); +export type PickersFadeTransitionGroupClassKey = + | 'root' + | 'fadeEnter' + | 'fadeEnterActive' + | 'fadeExit' + | 'fadeExitActive'; -export type PickersFadeTransitionGroupClassKey = keyof WithStyles['classes']; +const animationDuration = 500; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + display: 'block', + position: 'relative', + }, + fadeEnter: { + willChange: 'transform', + opacity: 0, + }, + fadeEnterActive: { + opacity: 1, + transition: theme.transitions.create('opacity', { + duration: animationDuration, + }), + }, + fadeExit: { + opacity: 1, + }, + fadeExitActive: { + opacity: 0, + transition: theme.transitions.create('opacity', { + duration: animationDuration / 2, + }), + }, +}); /** * @ignore - do not document. diff --git a/packages/material-ui-lab/src/DayPicker/PickersSlideTransition.tsx b/packages/material-ui-lab/src/DayPicker/PickersSlideTransition.tsx index 3323178b5013ab..5afdeec28c22ea 100644 --- a/packages/material-ui-lab/src/DayPicker/PickersSlideTransition.tsx +++ b/packages/material-ui-lab/src/DayPicker/PickersSlideTransition.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 { CSSTransition, TransitionGroup } from 'react-transition-group'; import { CSSTransitionProps } from 'react-transition-group/CSSTransition'; @@ -13,8 +13,20 @@ export interface SlideTransitionProps extends Omit { +export const styles: MuiStyles = ( + theme, +): StyleRules => { const slideTransition = theme.transitions.create('transform', { duration: slideAnimationDuration, easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)', @@ -61,11 +73,9 @@ export const styles = (theme: Theme) => { transition: slideTransition, zIndex: 0, }, - } as const; + }; }; -export type PickersSlideTransitionClassKey = keyof WithStyles['classes']; - /** * @ignore - do not document. */ diff --git a/packages/material-ui-lab/src/MonthPicker/MonthPicker.tsx b/packages/material-ui-lab/src/MonthPicker/MonthPicker.tsx index 66ff423e97ae21..f0b84e1e077e9a 100644 --- a/packages/material-ui-lab/src/MonthPicker/MonthPicker.tsx +++ b/packages/material-ui-lab/src/MonthPicker/MonthPicker.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 clsx from 'clsx'; import PickersMonth from './PickersMonth'; import { useUtils, useNow } from '../internal/pickers/hooks/useUtils'; @@ -23,16 +23,16 @@ export interface MonthPickerProps { onMonthChange?: (date: TDate) => void | Promise; } -export const styles = { +export type MonthPickerClassKey = 'root'; + +export const styles: MuiStyles = { root: { width: 310, display: 'flex', flexWrap: 'wrap', alignContent: 'stretch', }, -} as const; - -export type MonthPickerClassKey = keyof WithStyles['classes']; +}; /** * @ignore - do not document. diff --git a/packages/material-ui-lab/src/MonthPicker/PickersMonth.tsx b/packages/material-ui-lab/src/MonthPicker/PickersMonth.tsx index 5d40f9bc4487b5..acd7d66117476d 100644 --- a/packages/material-ui-lab/src/MonthPicker/PickersMonth.tsx +++ b/packages/material-ui-lab/src/MonthPicker/PickersMonth.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles'; import { onSpaceOrEnter } from '../internal/pickers/utils'; export interface MonthProps { @@ -12,7 +12,11 @@ export interface MonthProps { value: any; } -export const styles = (theme: Theme) => ({ +export type PickersMonthClassKey = 'root' | 'selected'; + +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ root: { flex: '1 0 33.33%', display: 'flex', @@ -38,8 +42,6 @@ export const styles = (theme: Theme) => ({ selected: {}, }); -export type PickersMonthClassKey = keyof WithStyles['classes']; - /** * @ignore - do not document. */ diff --git a/packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.tsx b/packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.tsx index bea421af6b230f..e785d1e86227d5 100644 --- a/packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.tsx +++ b/packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.tsx @@ -2,27 +2,31 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Skeleton from '@material-ui/core/Skeleton'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { WithStyles, withStyles, MuiStyles, StyleRules } from '@material-ui/core/styles'; import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions'; -import { styles as calendarStyles } from '../DayPicker/PickersCalendar'; +import { styles as calendarStyles, PickersCalendarClassKey } from '../DayPicker/PickersCalendar'; export interface PickersCalendarSkeletonProps extends React.HTMLProps {} -export const styles = (theme: Theme) => - ({ - ...calendarStyles(theme), - root: { - alignSelf: 'start', - }, - daySkeleton: { - margin: `0 ${DAY_MARGIN}px`, - }, - hidden: { - visibility: 'hidden', - }, - } as const); - -export type PickersCalendarSkeletonClassKey = keyof WithStyles['classes']; +export type PickersCalendarSkeletonClassKey = + | PickersCalendarClassKey + | 'root' + | 'daySkeleton' + | 'hidden'; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + ...calendarStyles(theme), + root: { + alignSelf: 'start', + }, + daySkeleton: { + margin: `0 ${DAY_MARGIN}px`, + }, + hidden: { + visibility: 'hidden', + }, +}); const monthMap = [ [0, 1, 1, 1, 1, 1, 1], diff --git a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx index efccba4ab5ed90..327307df5ca8b8 100644 --- a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx +++ b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase'; -import { WithStyles, withStyles, Theme, alpha } from '@material-ui/core/styles'; +import { StyleRules, MuiStyles, WithStyles, withStyles, alpha } from '@material-ui/core/styles'; import { useForkRef } from '@material-ui/core/utils'; import { ExtendMui } from '../internal/pickers/typings/helpers'; import { onSpaceOrEnter } from '../internal/pickers/utils'; @@ -11,65 +11,72 @@ import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions'; import { useCanAutoFocus } from '../internal/pickers/hooks/useCanAutoFocus'; import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState'; -const styles = (theme: Theme) => - ({ - root: { - ...theme.typography.caption, - width: DAY_SIZE, - height: DAY_SIZE, - borderRadius: '50%', - padding: 0, - // background required here to prevent collides with the other days when animating with transition group - backgroundColor: theme.palette.background.paper, - color: theme.palette.text.primary, - '&:hover': { - backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), - }, - '&:focus': { - backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), - '&$selected': { - willChange: 'background-color', - backgroundColor: theme.palette.primary.dark, - }, - }, +export type PickersDayClassKey = + | 'root' + | 'dayWithMargin' + | 'dayOutsideMonth' + | 'hiddenDaySpacingFiller' + | 'today' + | 'dayLabel' + | 'selected' + | 'disabled'; + +export const styles: MuiStyles = (theme): StyleRules => ({ + root: { + ...theme.typography.caption, + width: DAY_SIZE, + height: DAY_SIZE, + borderRadius: '50%', + padding: 0, + // background required here to prevent collides with the other days when animating with transition group + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + '&:hover': { + backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), + }, + '&:focus': { + backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), '&$selected': { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - fontWeight: theme.typography.fontWeightMedium, - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.short, - }), - '&:hover': { - willChange: 'background-color', - backgroundColor: theme.palette.primary.dark, - }, - }, - '&$disabled': { - color: theme.palette.text.secondary, + willChange: 'background-color', + backgroundColor: theme.palette.primary.dark, }, }, - dayWithMargin: { - margin: `0 ${DAY_MARGIN}px`, + '&$selected': { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + fontWeight: theme.typography.fontWeightMedium, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.short, + }), + '&:hover': { + willChange: 'background-color', + backgroundColor: theme.palette.primary.dark, + }, }, - dayOutsideMonth: { + '&$disabled': { color: theme.palette.text.secondary, }, - hiddenDaySpacingFiller: { - visibility: 'hidden', - }, - today: { - '&:not($selected)': { - border: `1px solid ${theme.palette.text.secondary}`, - }, - }, - dayLabel: { - // need for overrides + }, + dayWithMargin: { + margin: `0 ${DAY_MARGIN}px`, + }, + dayOutsideMonth: { + color: theme.palette.text.secondary, + }, + hiddenDaySpacingFiller: { + visibility: 'hidden', + }, + today: { + '&:not($selected)': { + border: `1px solid ${theme.palette.text.secondary}`, }, - selected: {}, - disabled: {}, - } as const); - -export type PickersDayClassKey = keyof WithStyles['classes']; + }, + dayLabel: { + // need for overrides + }, + selected: {}, + disabled: {}, +}); export interface PickersDayProps extends ExtendMui { /** diff --git a/packages/material-ui-lab/src/TimePicker/TimePickerToolbar.tsx b/packages/material-ui-lab/src/TimePicker/TimePickerToolbar.tsx index 747930592252b4..715a97da817bad 100644 --- a/packages/material-ui-lab/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/material-ui-lab/src/TimePicker/TimePickerToolbar.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; -import { useTheme, WithStyles, withStyles } from '@material-ui/core/styles'; +import { MuiStyles, useTheme, WithStyles, withStyles } from '@material-ui/core/styles'; import PickersToolbarText from '../internal/pickers/PickersToolbarText'; import ToolbarButton from '../internal/pickers/PickersToolbarButton'; import PickersToolbar from '../internal/pickers/PickersToolbar'; @@ -9,7 +9,17 @@ import { useUtils } from '../internal/pickers/hooks/useUtils'; import { useMeridiemMode } from '../internal/pickers/hooks/date-helpers-hooks'; import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker'; -export const styles = { +export type TimePickerToolbarClassKey = + | 'separator' + | 'hourMinuteLabel' + | 'hourMinuteLabelLandscape' + | 'hourMinuteLabelReverse' + | 'ampmSelection' + | 'ampmLandscape' + | 'ampmLabel' + | 'penIconLandscape'; + +export const styles: MuiStyles = { separator: { outline: 0, margin: '0 4px 0 2px', @@ -44,9 +54,7 @@ export const styles = { penIconLandscape: { marginTop: 'auto', }, -} as const; - -export type TimePickerToolbarClassKey = keyof WithStyles['classes']; +}; const clockTypographyVariant = 'h3'; diff --git a/packages/material-ui-lab/src/Timeline/Timeline.tsx b/packages/material-ui-lab/src/Timeline/Timeline.tsx index a09f777fdb4bfb..c2c70445d3a7c2 100644 --- a/packages/material-ui-lab/src/Timeline/Timeline.tsx +++ b/packages/material-ui-lab/src/Timeline/Timeline.tsx @@ -4,10 +4,12 @@ import clsx from 'clsx'; // eslint-disable-next-line no-restricted-imports -- importing types import { InternalStandardProps as StandardProps } from '@material-ui/core'; import { capitalize } from '@material-ui/core/utils'; -import { withStyles, WithStyles } from '@material-ui/core/styles'; +import { MuiStyles, withStyles } from '@material-ui/core/styles'; import TimelineContext from './TimelineContext'; -export const styles = { +export type TimelineClassKey = 'root' | 'alignLeft' | 'alignRight' | 'alignAlternate'; + +export const styles: MuiStyles = { /* Styles applied to the root element. */ root: { display: 'flex', @@ -21,9 +23,7 @@ export const styles = { alignRight: {}, /* Styles applied to the root element if `align="alternate"`. */ alignAlternate: {}, -} as const; - -export type TimelineClassKey = keyof WithStyles['classes']; +}; export interface TimelineProps extends StandardProps> { /** diff --git a/packages/material-ui-lab/src/YearPicker/PickersYear.tsx b/packages/material-ui-lab/src/YearPicker/PickersYear.tsx index f0104fc471c14d..b5dda509177f55 100644 --- a/packages/material-ui-lab/src/YearPicker/PickersYear.tsx +++ b/packages/material-ui-lab/src/YearPicker/PickersYear.tsx @@ -1,7 +1,14 @@ import * as React from 'react'; import clsx from 'clsx'; import { useForkRef } from '@material-ui/core/utils'; -import { WithStyles, withStyles, Theme, alpha } from '@material-ui/core/styles'; +import { + WithStyles, + withStyles, + Theme, + alpha, + StyleRules, + MuiStyles, +} from '@material-ui/core/styles'; import { onSpaceOrEnter } from '../internal/pickers/utils'; import { useCanAutoFocus } from '../internal/pickers/hooks/useCanAutoFocus'; import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext'; @@ -17,7 +24,9 @@ export interface YearProps { forwardedRef?: React.Ref; } -export const styles = (theme: Theme) => ({ +export type PickersYearClassKey = 'root' | 'modeDesktop' | 'yearButton' | 'disabled' | 'selected'; + +export const styles: MuiStyles = (theme): StyleRules => ({ root: { flexBasis: '33.3%', display: 'flex', @@ -56,8 +65,6 @@ export const styles = (theme: Theme) => ({ selected: {}, }); -export type PickersYearClassKey = keyof WithStyles['classes']; - /** * @ignore - internal component. */ diff --git a/packages/material-ui-lab/src/YearPicker/YearPicker.tsx b/packages/material-ui-lab/src/YearPicker/YearPicker.tsx index b540e735a654eb..e19a418319833d 100644 --- a/packages/material-ui-lab/src/YearPicker/YearPicker.tsx +++ b/packages/material-ui-lab/src/YearPicker/YearPicker.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { WithStyles, withStyles, useTheme } from '@material-ui/core/styles'; +import { WithStyles, withStyles, useTheme, MuiStyles } from '@material-ui/core/styles'; import clsx from 'clsx'; import PickersYear from './PickersYear'; import { useUtils, useNow } from '../internal/pickers/hooks/useUtils'; @@ -35,7 +35,9 @@ export interface YearPickerProps extends ExportedYearPickerProps { className?: string; } -export const styles = { +export type YearPickerClassKey = 'root'; + +export const styles: MuiStyles = { root: { display: 'flex', flexDirection: 'row', @@ -44,9 +46,7 @@ export const styles = { height: '100%', margin: '0 4px', }, -} as const; - -export type YearPickerClassKey = keyof WithStyles['classes']; +}; /** * @ignore - do not document. diff --git a/packages/material-ui-lab/src/internal/pickers/Picker/Picker.tsx b/packages/material-ui-lab/src/internal/pickers/Picker/Picker.tsx index c3668400c438a0..34fb331a35a9db 100644 --- a/packages/material-ui-lab/src/internal/pickers/Picker/Picker.tsx +++ b/packages/material-ui-lab/src/internal/pickers/Picker/Picker.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; -import { styled, WithStyles, withStyles } from '@material-ui/core/styles'; +import { MuiStyles, styled, WithStyles, withStyles } from '@material-ui/core/styles'; import { useViews } from '../hooks/useViews'; import ClockPicker from '../../../ClockPicker/ClockPicker'; import DayPicker from '../../../DayPicker/DayPicker'; @@ -35,7 +35,9 @@ export const MobileKeyboardInputView = styled('div')( { name: 'MuiPickersMobileKeyboardInputView' }, ); -export const styles = { +export type PickerClassKey = 'root' | 'landscape' | 'pickerView'; + +export const styles: MuiStyles = { root: { display: 'flex', flexDirection: 'column', @@ -51,9 +53,7 @@ export const styles = { flexDirection: 'column', margin: '0 auto', }, -} as const; - -export type PickerClassKey = keyof WithStyles['classes']; +}; const MobileKeyboardTextFieldProps = { fullWidth: true }; diff --git a/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx b/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx index 082fffec4c2e29..3f2db7176321c7 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; -import { WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, WithStyles, withStyles, useTheme } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import ArrowLeftIcon from '../svg-icons/ArrowLeft'; import ArrowRightIcon from '../svg-icons/ArrowRight'; @@ -45,21 +45,21 @@ interface ArrowSwitcherProps extends ExportedArrowSwitcherProps, React.HTMLProps onLeftClick: () => void; onRightClick: () => void; } +export type PickersArrowSwitcherClassKey = 'root' | 'spacer' | 'hidden'; -export const styles = (theme: Theme) => - ({ - root: { - display: 'flex', - }, - spacer: { - width: theme.spacing(3), - }, - hidden: { - visibility: 'hidden', - }, - } as const); - -export type PickersArrowSwitcherClassKey = keyof WithStyles['classes']; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + display: 'flex', + }, + spacer: { + width: theme.spacing(3), + }, + hidden: { + visibility: 'hidden', + }, +}); const PickersArrowSwitcher = React.forwardRef< HTMLDivElement, diff --git a/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx b/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx index 745bbf05e79fca..c313e712c447b9 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx @@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'; import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import Dialog, { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog'; -import { WithStyles, withStyles } from '@material-ui/core/styles'; +import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles'; import { DIALOG_WIDTH } from './constants/dimensions'; export interface ExportedPickerModalProps { @@ -52,7 +52,14 @@ export interface PickerModalDialogProps extends ExportedPickerModalProps { open: boolean; } -export const styles = { +export type PickersModalDialogClassKey = + | 'container' + | 'paper' + | 'content' + | 'action' + | 'withAdditionalAction'; + +export const styles: MuiStyles = { container: { outline: 0, }, @@ -74,9 +81,7 @@ export const styles = { marginRight: 'auto', }, }, -} as const; - -export type PickersModalDialogClassKey = keyof WithStyles['classes']; +}; const PickersModalDialog: React.FC> = ( props, diff --git a/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx b/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx index e34c3dbbd36219..42f81ffb83e8c3 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx @@ -7,7 +7,7 @@ import TrapFocus, { TrapFocusProps as MuiTrapFocusProps, } from '@material-ui/core/Unstable_TrapFocus'; import { useForkRef, setRef, useEventCallback } from '@material-ui/core/utils'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles'; import { TransitionProps as MuiTransitionProps } from '@material-ui/core/transitions'; import { useGlobalKeyDown, keycode } from './hooks/useKeyDown'; import { executeInTheNextEventLoopTick } from './utils'; @@ -33,21 +33,22 @@ export interface PickerPopperProps extends ExportedPickerPopperProps, MuiPaperPr onOpen: () => void; } -export const styles = (theme: Theme) => - ({ - root: { - zIndex: theme.zIndex.modal, - }, - paper: { - transformOrigin: 'top center', - outline: 0, - }, - topTransition: { - transformOrigin: 'bottom center', - }, - } as const); +export type PickersPopperClassKey = 'root' | 'paper' | 'topTransition'; -export type PickersPopperClassKey = keyof WithStyles['classes']; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + zIndex: theme.zIndex.modal, + }, + paper: { + transformOrigin: 'top center', + outline: 0, + }, + topTransition: { + transformOrigin: 'bottom center', + }, +}); const PickersPopper: React.FC> = (props) => { const { diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbar.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbar.tsx index e5fc0d71dc668f..154791be49277e 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbar.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbar.tsx @@ -3,33 +3,34 @@ import clsx from 'clsx'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles'; import PenIcon from '../svg-icons/Pen'; import CalendarIcon from '../svg-icons/Calendar'; import { ToolbarComponentProps } from './typings/BasePicker'; -export const styles = (theme: Theme) => - ({ - root: { - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start', - justifyContent: 'space-between', - padding: theme.spacing(2, 3), - }, - toolbarLandscape: { - height: 'auto', - maxWidth: 160, - padding: 16, - justifyContent: 'flex-start', - flexWrap: 'wrap', - }, - dateTitleContainer: { - flex: 1, - }, - } as const); +export type PickersToolbarClassKey = 'root' | 'toolbarLandscape' | 'dateTitleContainer'; -export type PickersToolbarClassKey = keyof WithStyles['classes']; +export const styles: MuiStyles = ( + theme, +): StyleRules => ({ + root: { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'space-between', + padding: theme.spacing(2, 3), + }, + toolbarLandscape: { + height: 'auto', + maxWidth: 160, + padding: 16, + justifyContent: 'flex-start', + flexWrap: 'wrap', + }, + dateTitleContainer: { + flex: 1, + }, +}); export interface PickersToolbarProps extends Pick< diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarButton.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarButton.tsx index 86f940ec328d7a..28d5ee6f619776 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarButton.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Button, { ButtonProps } from '@material-ui/core/Button'; -import { WithStyles, withStyles } from '@material-ui/core/styles'; +import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles'; import { TypographyProps } from '@material-ui/core/Typography'; import PickersToolbarText from './PickersToolbarText'; import { ExtendMui } from './typings/helpers'; @@ -14,15 +14,15 @@ export interface ToolbarButtonProps extends ExtendMui = { root: { padding: 0, minWidth: '16px', textTransform: 'none', }, -} as const; - -export type PickersToolbarButtonClassKey = keyof WithStyles['classes']; +}; const ToolbarButton: React.FunctionComponent> = ( props, diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 9bf5d11002b118..67aa69889961ff 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography, { TypographyProps } from '@material-ui/core/Typography'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles'; import { ExtendMui } from './typings/helpers'; export interface PickersToolbarTextProps extends ExtendMui { @@ -9,7 +9,10 @@ export interface PickersToolbarTextProps extends ExtendMui { value: React.ReactNode; } -export const styles = (theme: Theme) => { +export type PickersToolbarTextClassKey = 'root' | 'selected'; +export const styles: MuiStyles = ( + theme, +): StyleRules => { return { root: { transition: theme.transitions.create('color'), @@ -22,8 +25,6 @@ export const styles = (theme: Theme) => { }; }; -export type PickersToolbarTextClassKey = keyof WithStyles['classes']; - const PickersToolbarText: React.FC> = ( props, ) => { diff --git a/packages/material-ui-lab/src/internal/pickers/wrappers/StaticWrapper.tsx b/packages/material-ui-lab/src/internal/pickers/wrappers/StaticWrapper.tsx index 72860569173d65..2317cd79737c50 100644 --- a/packages/material-ui-lab/src/internal/pickers/wrappers/StaticWrapper.tsx +++ b/packages/material-ui-lab/src/internal/pickers/wrappers/StaticWrapper.tsx @@ -1,19 +1,20 @@ import * as React from 'react'; -import { WithStyles, withStyles, Theme } from '@material-ui/core/styles'; +import { WithStyles, withStyles, MuiStyles, StyleRules } from '@material-ui/core/styles'; import { DIALOG_WIDTH } from '../constants/dimensions'; import { WrapperVariantContext, IsStaticVariantContext } from './WrapperVariantContext'; import { StaticWrapperProps, PrivateWrapperProps } from './WrapperProps'; -const styles = (theme: Theme) => - ({ - root: { - overflow: 'hidden', - minWidth: DIALOG_WIDTH, - display: 'flex', - flexDirection: 'column', - backgroundColor: theme.palette.background.paper, - }, - } as const); +type StaticWrapperClassKey = 'root'; + +const styles: MuiStyles = (theme): StyleRules => ({ + root: { + overflow: 'hidden', + minWidth: DIALOG_WIDTH, + display: 'flex', + flexDirection: 'column', + backgroundColor: theme.palette.background.paper, + }, +}); const StaticWrapper: React.FC< PrivateWrapperProps & StaticWrapperProps & WithStyles diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts index 16ba132723f684..11e4950d738795 100644 --- a/packages/material-ui/src/styles/index.d.ts +++ b/packages/material-ui/src/styles/index.d.ts @@ -18,6 +18,8 @@ export { default as useTheme } from './useTheme'; export { default as useThemeProps } from './useThemeProps'; export { default as withStyles, + MuiStyles, + Styles, WithStyles, StyleRules, StyleRulesCallback, diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts index 6b68913f544c09..128664656b456d 100644 --- a/packages/material-ui/src/styles/withStyles.d.ts +++ b/packages/material-ui/src/styles/withStyles.d.ts @@ -35,6 +35,15 @@ export type StyleRules< Props extends object = {} > = ActualStyleRules; +/** + * Styles for Material-UI assuming that the theme (or an augmented type) from `@material-ui/core/styles` is applied. + */ +export type MuiStyles = Styles< + Theme, + Props, + ClassKey +>; + export type WithStyles< StylesOrClassKey extends string | Styles = string, IncludeTheme extends boolean | undefined = false