Update material-ui

package.json

@@ -34,50 +34,47 @@
     "build:babel:esm": "BABEL_ENV=esm babel --extensions \".ts,.tsx\" --copy-files src --out-dir dist/esm",
     "build:types": "tsc",
     "lint": "eslint 'src/**/*.ts?(x)'",
-    "prettier": "prettier --write 'src/**/*.{ts?(x),css}'",
+    "prettier": "prettier --write \"src/**/*.{ts?(x),css}\"",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "deploy-storybook": "gh-pages -d storybook-static"
   },
-  "peerDependencies": {
-    "@material-ui/core": ">=4.11.3",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-proposal-export-default-from": "^7.12.1",
-    "@babel/plugin-transform-typescript": "^7.12.1",
-    "@material-ui/core": "^4.11.3",
-    "@storybook/addon-actions": "^6.1.21",
-    "@storybook/addon-essentials": "^6.1.21",
-    "@storybook/addon-links": "^6.1.21",
-    "@storybook/react": "^6.1.21",
-    "@types/node": "^14.14.20",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-export-default-from": "^7.14.5",
+    "@babel/plugin-transform-typescript": "^7.14.6",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^10.0.27",
+    "@storybook/addon-actions": "^6.3.4",
+    "@storybook/addon-essentials": "^6.3.4",
+    "@storybook/addon-links": "^6.3.4",
+    "@storybook/react": "^6.3.4",
+    "@types/node": "^16.3.3",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/parser": "^4.28.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-typescript-to-proptypes": "^1.4.2",
-    "concurrently": "^5.3.0",
-    "del-cli": "^3.0.1",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "concurrently": "^6.2.0",
+    "del-cli": "^4.0.1",
+    "eslint": "^7.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.1",
-    "typescript": "^4.1.3"
+    "react-scripts": "^4.0.3",
+    "typescript": "^4.3.5"
   },
   "dependencies": {
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "cronstrue": "^1.110.0",
-    "recoil": "^0.1.3"
+    "@material-ui/core": "^5.0.0-beta.1",
+    "@material-ui/styles": "^4.11.4",
+    "cronstrue": "^1.114.0",
+    "recoil": "^0.3.1"
   }
 }

src/Scheduler.tsx

@@ -1,5 +1,5 @@
-import Box from '@material-ui/core/Box/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import Box from '@material-ui/core/Box'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import React from 'react'
 import {

src/components/CronExp.tsx

@@ -1,5 +1,5 @@
 import Box from '@material-ui/core/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import TextField from '@material-ui/core/TextField'
 import React from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'

src/components/CronReader.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, createStyles } from '@material-ui/core'
+import { makeStyles, createStyles } from '@material-ui/styles'
 import Box from '@material-ui/core/Box'
 import Typography from '@material-ui/core/Typography'
 import cronstrue from 'cronstrue'

src/components/CustomSelect.tsx

@@ -2,7 +2,7 @@ import Chip from '@material-ui/core/Chip'
 import TextField from '@material-ui/core/TextField'
 import Autocomplete, {
   AutocompleteChangeReason,
-} from '@material-ui/lab/Autocomplete'
+} from '@material-ui/core/Autocomplete'
 import React from 'react'
 import { CustomSelectProps, SelectOptions } from '../types'
 import { getSortedOptions } from '../utils'
@@ -28,20 +28,20 @@ export default function CustomSelect(props: CustomSelectProps) {
     if (reason === 'clear') {
       setValue([options[0]])
     } else if (
-      reason === 'select-option' &&
+      reason === 'selectOption' &&
       single &&
       props.multiple !== false
     ) {
-      const val = ((newValue as unknown) as SelectOptions[]).filter(
+      const val = (newValue as unknown as SelectOptions[]).filter(
         // @ts-ignore
         (val) => val.label === event.target.childNodes[0].wholeText
       )
       setValue(val)
-    } else if (sort && reason === 'select-option') {
-      setValue(getSortedOptions((newValue as unknown) as SelectOptions[]))
-    } else if (reason !== 'remove-option') {
+    } else if (sort && reason === 'selectOption') {
+      setValue(getSortedOptions(newValue as unknown as SelectOptions[]))
+    } else if (reason !== 'removeOption') {
       setValue(newValue)
-    } else if (reason === 'remove-option' && disableEmpty) {
+    } else if (reason === 'removeOption' && disableEmpty) {
       if ((newValue as SelectOptions[]).length !== 0) {
         setValue(newValue)
       }
@@ -55,7 +55,7 @@ export default function CustomSelect(props: CustomSelectProps) {
         options={options}
         value={value}
         onChange={handleChange}
-        getOptionSelected={(option, val) =>
+        isOptionEqualToValue={(option, val) =>
           (option as SelectOptions).value === (val as SelectOptions).value
         }
         getOptionLabel={(option) => (option as SelectOptions).label}

src/constants.ts

@@ -60,7 +60,8 @@ const periodOptionsWithHourDisabled = () =>
       : periodOption
   )
 
-export const periodOptionsNonAdmin: SelectOptions[] = periodOptionsWithHourDisabled()
+export const periodOptionsNonAdmin: SelectOptions[] =
+  periodOptionsWithHourDisabled()
 
 /* WEEK */
 
@@ -112,11 +113,11 @@ export const LAST_DAY_OF_MONTH_OPT = {
   label: 'Last Day of Month',
 }
 
-export const DEFAULT_DAY_OF_MONTH_OPTS_WITH_L = defaultDayOfMonthOptionsWithOrdinal().concat(
-  LAST_DAY_OF_MONTH_OPT
-)
+export const DEFAULT_DAY_OF_MONTH_OPTS_WITH_L =
+  defaultDayOfMonthOptionsWithOrdinal().concat(LAST_DAY_OF_MONTH_OPT)
 
-export const DEFAULT_DAY_OF_MONTH_OPTS_WITH_ORD = defaultDayOfMonthOptionsWithOrdinal()
+export const DEFAULT_DAY_OF_MONTH_OPTS_WITH_ORD =
+  defaultDayOfMonthOptionsWithOrdinal()
 
 export const DEFAULT_DAY_OF_MONTH_OPTS = defaultDayOfMonthOptions()
 

src/fields/DayOfMonth.tsx

@@ -1,5 +1,5 @@
 import Box from '@material-ui/core/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 import React from 'react'

src/fields/Hour.tsx

@@ -1,5 +1,5 @@
 import Box from '@material-ui/core/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 import React from 'react'
@@ -50,13 +50,11 @@ export default function Hour() {
   const [hour, setHour] = useRecoilState(hourState)
   const [hourOptions, setHourOptions] = React.useState(defaultHourOptions)
 
-  const [possibleStartTimes, setPossibleStartTimes] = React.useState(
-    POSSIBLE_TIME_RANGES
-  )
+  const [possibleStartTimes, setPossibleStartTimes] =
+    React.useState(POSSIBLE_TIME_RANGES)
 
-  const [possibleEndTimes, setPossibleEndTimes] = React.useState(
-    POSSIBLE_TIME_RANGES
-  )
+  const [possibleEndTimes, setPossibleEndTimes] =
+    React.useState(POSSIBLE_TIME_RANGES)
 
   React.useEffect(() => {
     const startIndex = possibleStartTimes.findIndex(

src/fields/Minute.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 import React from 'react'

src/fields/Month.tsx

@@ -1,5 +1,5 @@
 import Box from '@material-ui/core/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 import React from 'react'

src/fields/Period.tsx

@@ -1,5 +1,5 @@
 import Box from '@material-ui/core/Box/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 import React from 'react'

src/fields/Week.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 import React from 'react'

src/types.ts

@@ -1,12 +1,12 @@
-import { AutocompleteGetTagProps } from '@material-ui/lab/Autocomplete'
+import { AutocompleteRenderGetTagProps } from '@material-ui/core/Autocomplete'
 import { SetterOrUpdater } from 'recoil'
 
 export type PeriodType = 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute'
 
 export interface CustomSelectProps {
   renderTags?: (
     value: SelectOptions[],
-    getTagProps: AutocompleteGetTagProps
+    getTagProps: AutocompleteRenderGetTagProps
   ) => React.ReactNode
   options: Array<SelectOptions>
   value: SelectOptions | SelectOptions[]

src/utils.ts

@@ -116,7 +116,8 @@ export function hasNoDuplicates(part: string) {
 
 export const REGEX_ALL = /^([*])\/([1-9]{1})([0-9]{0,1})$/
 export const REGEX_EVERY = /^([0-9]{1,4})\/([1-9]{1,2})$/
-export const REGEX_EVERY_HYPEN = /^([0-9]{1,2}-[0-9]{1,2})\/([1-9]{1})?([0-9]{1})$/
+export const REGEX_EVERY_HYPEN =
+  /^([0-9]{1,2}-[0-9]{1,2})\/([1-9]{1})?([0-9]{1})$/
 export const REGEX_COMMA = /^[0-9]{1,2}(,[0-9]{1,2})+$/
 export const REGEX_HYPHEN = /^([0-9]{1,2}-[0-9]{1,2})$/
 export const REGEX_SINGLE_DIGIT = /^([0-9]{1,2})$/