From d89e549bbeabc66a32c71aee670b92f31eeefce5 Mon Sep 17 00:00:00 2001 From: MikeVitik Date: Fri, 8 Oct 2021 12:03:13 +0300 Subject: [PATCH 01/35] update all package.json to MUI5 migration chart code to MUI5 support --- packages/dx-react-chart-demos/package.json | 10 +- .../area-chart/material-ui/area.partial.jsx | 2 +- .../material-ui/fullstacked-area.jsx | 4 +- .../area-chart/material-ui/spline-area.jsx | 4 +- .../area-chart/material-ui/stacked-area.jsx | 4 +- .../area-chart/material-ui/step-area.jsx | 4 +- .../material-ui/bidirection-bar.partial.jsx | 2 +- .../bar-chart/material-ui/fullstacked-bar.jsx | 4 +- .../material-ui/series-interaction.jsx | 10 +- .../bar-chart/material-ui/side-by-side.jsx | 4 +- .../bar-chart/material-ui/stacked-bar.jsx | 4 +- .../chart-basic/material-ui/theme.jsx | 10 +- .../demo-sources/export/material-ui/demo.jsx | 16 +- .../layout/material-ui/legend.jsx | 4 +- .../demo-sources/layout/material-ui/title.jsx | 4 +- .../line-chart/material-ui/line.jsx | 4 +- .../line-chart/material-ui/spline.jsx | 6 +- .../material-ui/step-line-with-gaps.jsx | 4 +- .../line-chart/material-ui/step-line.jsx | 4 +- .../zoom-pan/material-ui/datetime.jsx | 8 +- .../zoom-pan/material-ui/scatter.partial.jsx | 6 +- .../material-ui/demo-container.jsx | 32 +- .../dx-react-chart-material-ui/package.json | 10 +- .../src/templates/legend/item.jsx | 19 +- .../src/templates/legend/item.test.jsx | 16 +- .../src/templates/legend/label.jsx | 2 +- .../src/templates/legend/label.test.jsx | 9 +- .../src/templates/legend/root.jsx | 2 +- .../src/templates/legend/root.test.jsx | 9 +- .../src/templates/series/point.jsx | 2 +- .../src/templates/title/text.jsx | 2 +- .../src/templates/title/text.test.jsx | 8 +- .../src/templates/tooltip/arrow.jsx | 2 +- .../src/templates/tooltip/arrow.test.jsx | 6 +- .../src/templates/tooltip/content.jsx | 2 +- .../src/templates/tooltip/content.test.jsx | 8 +- .../src/templates/tooltip/overlay.jsx | 4 +- .../src/templates/tooltip/overlay.test.jsx | 8 +- .../src/templates/tooltip/sheet.jsx | 2 +- .../src/templates/tooltip/sheet.test.jsx | 8 +- .../src/templates/utils.jsx | 10 +- packages/dx-react-grid-demos/package.json | 10 +- .../dx-react-grid-material-ui/package.json | 10 +- .../dx-react-scheduler-demos/package.json | 10 +- .../package.json | 10 +- packages/dx-testing/package.json | 1 + packages/dx-testing/src/index.js | 1 + yarn.lock | 386 +++++++++++++++--- 48 files changed, 507 insertions(+), 200 deletions(-) diff --git a/packages/dx-react-chart-demos/package.json b/packages/dx-react-chart-demos/package.json index 71cbc6d08f..e04fb97de5 100644 --- a/packages/dx-react-chart-demos/package.json +++ b/packages/dx-react-chart-demos/package.json @@ -33,10 +33,12 @@ "@devexpress/dx-react-chart-bootstrap4": "2.7.6", "@devexpress/dx-react-chart-material-ui": "2.7.6", "@devexpress/dx-react-core": "2.7.6", - "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", - "@types/react": "16.14.8", - "@types/react-dom": "^16.9.13", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/icons-material": "^5.0.0", + "@types/react": "^17.0.27", + "@types/react-dom": "^17.0.9", "clsx": "^1.0.4", "codemirror": "^5.49.2", "core-js": "^3.4.1", diff --git a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/area.partial.jsx b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/area.partial.jsx index 0b5aab58af..0f5b7abff1 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/area.partial.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/area.partial.jsx @@ -1,5 +1,5 @@ // BLOCK:imports -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; // BLOCK:imports // BLOCK:body diff --git a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/fullstacked-area.jsx b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/fullstacked-area.jsx index 5bbb040c06..bf2e580908 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/fullstacked-area.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/fullstacked-area.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -9,7 +9,7 @@ import { Legend, } from '@devexpress/dx-react-chart-material-ui'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Stack, Animation } from '@devexpress/dx-react-chart'; import { stackOffsetExpand } from 'd3-shape'; import { carbonEmmision as data } from '../../../demo-data/data-vizualization'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/spline-area.jsx b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/spline-area.jsx index d339375d29..58c04a3e4d 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/spline-area.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/spline-area.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -8,7 +8,7 @@ import { Title, Legend, } from '@devexpress/dx-react-chart-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { ArgumentScale, Animation } from '@devexpress/dx-react-chart'; import { curveCatmullRom, diff --git a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/stacked-area.jsx b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/stacked-area.jsx index 80f4b35d8a..8da54ac484 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/stacked-area.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/stacked-area.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -9,7 +9,7 @@ import { Legend, } from '@devexpress/dx-react-chart-material-ui'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Stack, Animation } from '@devexpress/dx-react-chart'; import { carbonEmmision as data } from '../../../demo-data/data-vizualization'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/step-area.jsx b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/step-area.jsx index d2c355fbd6..143ad76a40 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/step-area.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/step-area.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -8,7 +8,7 @@ import { Title, Legend, } from '@devexpress/dx-react-chart-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Animation } from '@devexpress/dx-react-chart'; import { area, curveStep } from 'd3-shape'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/bidirection-bar.partial.jsx b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/bidirection-bar.partial.jsx index 8d47ecc53c..4f1bfa61af 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/bidirection-bar.partial.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/bidirection-bar.partial.jsx @@ -1,5 +1,5 @@ // BLOCK:imports -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; // BLOCK:imports // BLOCK:body diff --git a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/fullstacked-bar.jsx b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/fullstacked-bar.jsx index 77045c8eb8..04ad188748 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/fullstacked-bar.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/fullstacked-bar.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -8,7 +8,7 @@ import { Title, Legend, } from '@devexpress/dx-react-chart-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Stack, Animation } from '@devexpress/dx-react-chart'; import { stackOffsetExpand } from 'd3-shape'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/series-interaction.jsx b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/series-interaction.jsx index ad63aefd63..83eca37b54 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/series-interaction.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/series-interaction.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, BarSeries, @@ -14,12 +14,12 @@ import { scaleBand } from '@devexpress/dx-chart-core'; import { ArgumentScale, Stack, Animation, EventTracker, HoverState, SelectionState, } from '@devexpress/dx-react-chart'; -import Button from '@material-ui/core/Button'; -import { withStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; +import withStyles from '@mui/styles/withStyles'; import { NavigateBefore, NavigateNext, -} from '@material-ui/icons/'; -import Typography from '@material-ui/core/Typography'; +} from '@mui/icons-material/'; +import Typography from '@mui/material/Typography'; import { annualVehiclesSales as data } from '../../../demo-data/data-vizualization'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/side-by-side.jsx b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/side-by-side.jsx index 16ae1f32a1..7604209739 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/side-by-side.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/side-by-side.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -8,7 +8,7 @@ import { Title, Legend, } from '@devexpress/dx-react-chart-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Stack, Animation } from '@devexpress/dx-react-chart'; import { olimpicMedals as data } from '../../../demo-data/data-vizualization'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/stacked-bar.jsx b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/stacked-bar.jsx index bb0cfec9bf..d1f6884786 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/stacked-bar.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/stacked-bar.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, ArgumentAxis, @@ -8,7 +8,7 @@ import { Title, Legend, } from '@devexpress/dx-react-chart-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Stack, Animation } from '@devexpress/dx-react-chart'; import { energyConsumption as data } from '../../../demo-data/data-vizualization'; diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/material-ui/theme.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/material-ui/theme.jsx index f764b715f5..62ff3164f0 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/material-ui/theme.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/material-ui/theme.jsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Chart, PieSeries, } from '@devexpress/dx-react-chart-material-ui'; -import { withStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import NativeSelect from '@material-ui/core/NativeSelect'; -import FormControl from '@material-ui/core/FormControl'; +import withStyles from '@mui/styles/withStyles'; +import Typography from '@mui/material/Typography'; +import NativeSelect from '@mui/material/NativeSelect'; +import FormControl from '@mui/material/FormControl'; import { schemeCategory10, schemeAccent, diff --git a/packages/dx-react-chart-demos/src/demo-sources/export/material-ui/demo.jsx b/packages/dx-react-chart-demos/src/demo-sources/export/material-ui/demo.jsx index 21a933a339..c791f0233f 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/export/material-ui/demo.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/export/material-ui/demo.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ArgumentAxis, ValueAxis, @@ -11,14 +11,14 @@ import { import { Plugin, Template, TemplatePlaceholder } from '@devexpress/dx-react-core'; import domtoimage from 'dom-to-image'; import JsPDF from 'jspdf'; -import IconButton from '@material-ui/core/IconButton'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; +import IconButton from '@mui/material/IconButton'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; import { scaleBand } from '@devexpress/dx-chart-core'; import { ArgumentScale, Stack, Animation } from '@devexpress/dx-react-chart'; -import { withStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; +import withStyles from '@mui/styles/withStyles'; +import Typography from '@mui/material/Typography'; import { gaming as data } from '../../../demo-data/data-vizualization'; @@ -158,7 +158,7 @@ const ExportBase = (props) => { id={iconButton} onClick={handleClick} className={classes.button} - > + size="large"> { const ret = []; diff --git a/packages/dx-react-chart-demos/src/demo-sources/zoom-pan/material-ui/scatter.partial.jsx b/packages/dx-react-chart-demos/src/demo-sources/zoom-pan/material-ui/scatter.partial.jsx index 024bbb3123..4db432d260 100644 --- a/packages/dx-react-chart-demos/src/demo-sources/zoom-pan/material-ui/scatter.partial.jsx +++ b/packages/dx-react-chart-demos/src/demo-sources/zoom-pan/material-ui/scatter.partial.jsx @@ -1,8 +1,8 @@ // BLOCK:imports -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; // BLOCK:imports // BLOCK:body diff --git a/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-container.jsx b/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-container.jsx index 285845ada3..b3888b0f5b 100644 --- a/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-container.jsx +++ b/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-container.jsx @@ -1,33 +1,39 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; -import { blue } from '@material-ui/core/colors'; +import { + ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme, +} from '@mui/material/styles'; +import { blue } from '@mui/material/colors'; -const lightTheme = createMuiTheme({ +const lightTheme = createTheme(adaptV4Theme({ palette: { - type: 'light', + mode: 'light', primary: blue, }, typography: { useNextVariants: true, }, -}); +})); -const darkTheme = createMuiTheme({ +const darkTheme = createTheme(adaptV4Theme({ palette: { - type: 'dark', + mode: 'dark', primary: blue, }, typography: { useNextVariants: true, }, -}); +})); -const DemoContainer = ({ theme, children }) => ( - - {children} - -); +const DemoContainer = ({ theme, children }) => { + return ( + + + {children} + + + ); +}; DemoContainer.propTypes = { theme: PropTypes.any.isRequired, diff --git a/packages/dx-react-chart-material-ui/package.json b/packages/dx-react-chart-material-ui/package.json index f588862530..3a2febb64a 100644 --- a/packages/dx-react-chart-material-ui/package.json +++ b/packages/dx-react-chart-material-ui/package.json @@ -54,7 +54,11 @@ "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-testing": "2.7.6", "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/styles": "^5.0.0", + "@mui/icons-material": "^5.0.0", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", @@ -88,8 +92,8 @@ "@devexpress/dx-chart-core": "2.7.6", "@devexpress/dx-react-chart": "2.7.6", "@devexpress/dx-react-core": "2.7.6", - "@material-ui/core": ">=4.5.0", - "@material-ui/icons": ">=4.4.3", + "@mui/material": ">=5.0.0", + "@mui/icons-material": ">=5.0.0", "react": ">=17.0.2" } } diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx index cb7a33e6c2..8016b3223d 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx @@ -1,12 +1,15 @@ -import ListItem from '@material-ui/core/ListItem'; +import ListItem from '@mui/material/ListItem'; import { withClassName } from '../utils'; -const styles = theme => ({ - root: { - alignItems: 'center', - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }, -}); +const styles = (theme) => { + debugger; + return ({ + root: { + alignItems: 'center', + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + }, + }); +}; export const Item = withClassName(styles, { name: 'LegendItem' })(ListItem); diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/item.test.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/item.test.jsx index 5148c62b9e..8f1554c24c 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/item.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/item.test.jsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import ListItem from '@material-ui/core/ListItem'; +import { createShallow, getClasses } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; +import ListItem from '@mui/material/ListItem'; import { Item } from './item'; +const mockDefaultTheme = createTheme(); +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Root', () => { - const shallow = createShallow({ dive: true }); - const classes = getClasses( - - children - , - ); + const shallow = createShallow(); + const classes = getClasses(children); it('should render List item', () => { const tree = shallow(( diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/label.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/label.jsx index 5839decfa7..bf6a20f209 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/label.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/label.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import ListItemText from '@material-ui/core/ListItemText'; +import ListItemText from '@mui/material/ListItemText'; import { withClassName } from '../utils'; const styles = () => ({ diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/label.test.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/label.test.jsx index 9940ee4a88..49770b1380 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/label.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/label.test.jsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import ListItemText from '@material-ui/core/ListItemText'; +import { createTheme } from '@mui/material/styles'; +import { createMount, getClasses } from '@devexpress/dx-testing'; +import ListItemText from '@mui/material/ListItemText'; import { Label } from './label'; +const mockDefaultTheme = createTheme(); + +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + const defaultProps = { text: 'a' }; describe('Label', () => { diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/root.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/root.jsx index 78f9ec0215..ce808da709 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/root.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/root.jsx @@ -1,4 +1,4 @@ -import List from '@material-ui/core/List'; +import List from '@mui/material/List'; import { withClassName } from '../utils'; const styles = () => ({ diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/root.test.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/root.test.jsx index 489f38e2ac..3210568914 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/root.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/root.test.jsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import List from '@material-ui/core/List'; +import { createShallow, getClasses } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; +import List from '@mui/material/List'; import { Root } from './root'; +const mockDefaultTheme = createTheme(); + +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Root', () => { const shallow = createShallow({ dive: true }); const classes = getClasses( diff --git a/packages/dx-react-chart-material-ui/src/templates/series/point.jsx b/packages/dx-react-chart-material-ui/src/templates/series/point.jsx index f7e94a7e8b..7d480fa3fa 100644 --- a/packages/dx-react-chart-material-ui/src/templates/series/point.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/series/point.jsx @@ -1,5 +1,5 @@ import { ScatterSeries, withPatchedProps } from '@devexpress/dx-react-chart'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; const styles = theme => ({ diff --git a/packages/dx-react-chart-material-ui/src/templates/title/text.jsx b/packages/dx-react-chart-material-ui/src/templates/title/text.jsx index 564e0e7db5..bc3de19d21 100644 --- a/packages/dx-react-chart-material-ui/src/templates/title/text.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/title/text.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import { withClassName } from '../utils'; const styles = () => ({ diff --git a/packages/dx-react-chart-material-ui/src/templates/title/text.test.jsx b/packages/dx-react-chart-material-ui/src/templates/title/text.test.jsx index a1245d41d9..cffb8ff2fe 100644 --- a/packages/dx-react-chart-material-ui/src/templates/title/text.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/title/text.test.jsx @@ -1,8 +1,12 @@ import * as React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import Typography from '@material-ui/core/Typography'; +import { createMount, getClasses } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; import { Text } from './text'; +const mockDefaultTheme = createTheme(); +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Text', () => { const defaultProps = { text: 'chart', diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.jsx index 5bfb35db62..58c90cb128 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; import * as PropTypes from 'prop-types'; diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.test.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.test.jsx index 7a316be531..8bb3a9a4af 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/arrow.test.jsx @@ -1,7 +1,11 @@ import * as React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import { createMount, getClasses } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; import { Arrow } from './arrow'; +const mockDefaultTheme = createTheme(); +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Arrow', () => { const defaultProps = { className: 'custom-className', diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/content.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/content.jsx index 710235bc43..77b205211e 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/content.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/content.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import { withClassName } from '../utils'; const styles = theme => ({ diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/content.test.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/content.test.jsx index a9da923851..a61b778877 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/content.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/content.test.jsx @@ -1,8 +1,12 @@ import * as React from 'react'; -import { createMount } from '@material-ui/core/test-utils'; -import Typography from '@material-ui/core/Typography'; +import { createMount } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; import { Content } from './content'; +const mockDefaultTheme = createTheme(); +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Content', () => { const defaultProps = { text: 'tooltip-text', diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.jsx index 49451d52a0..9cb3b00942 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { withStyles } from '@material-ui/core/styles'; -import Popper from '@material-ui/core/Popper'; +import withStyles from '@mui/styles/withStyles'; +import Popper from '@mui/material/Popper'; import { RIGHT, TOP } from '@devexpress/dx-chart-core'; import classNames from 'clsx'; import * as PropTypes from 'prop-types'; diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.test.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.test.jsx index dc6b9d0216..d7540e7477 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.test.jsx @@ -1,8 +1,12 @@ import * as React from 'react'; -import Popper from '@material-ui/core/Popper'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import Popper from '@mui/material/Popper'; +import { createMount, getClasses } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; import { Overlay } from './overlay'; +const mockDefaultTheme = createTheme(); +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Overlay', () => { const ArrowComponent = () => null; diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.jsx index 8fc56e6f5d..7401df768b 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { withClassName } from '../utils'; const styles = theme => ({ diff --git a/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.test.jsx b/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.test.jsx index 7e06f1d7e1..a04492a854 100644 --- a/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.test.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/tooltip/sheet.test.jsx @@ -1,8 +1,12 @@ import * as React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import Paper from '@material-ui/core/Paper'; +import { createMount, getClasses } from '@devexpress/dx-testing'; +import { createTheme } from '@mui/material/styles'; +import Paper from '@mui/material/Paper'; import { Sheet } from './sheet'; +const mockDefaultTheme = createTheme(); +jest.mock('@mui/private-theming/useTheme', () => () => mockDefaultTheme); + describe('Sheet', () => { let mount; const classes = getClasses(); diff --git a/packages/dx-react-chart-material-ui/src/templates/utils.jsx b/packages/dx-react-chart-material-ui/src/templates/utils.jsx index fe6a952332..196675c829 100644 --- a/packages/dx-react-chart-material-ui/src/templates/utils.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/utils.jsx @@ -1,12 +1,12 @@ import { withPatchedProps } from '@devexpress/dx-react-chart'; -import { darken, fade, lighten } from '@material-ui/core/styles/colorManipulator'; -import { withStyles } from '@material-ui/core/styles'; +import { darken, alpha, lighten } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; export const getBorderColor = theme => ( - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68) + theme.palette.mode === 'light' + ? lighten(alpha(theme.palette.divider, 1), 0.88) + : darken(alpha(theme.palette.divider, 1), 0.68) ); export const withClassName = (...args) => { diff --git a/packages/dx-react-grid-demos/package.json b/packages/dx-react-grid-demos/package.json index 643871670d..dc28dad512 100644 --- a/packages/dx-react-grid-demos/package.json +++ b/packages/dx-react-grid-demos/package.json @@ -38,11 +38,13 @@ "@devexpress/dx-react-grid-bootstrap4": "2.7.6", "@devexpress/dx-react-grid-export": "2.7.6", "@devexpress/dx-react-grid-material-ui": "2.7.6", - "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/icons-material": "^5.0.0", "@material-ui/pickers": "^3.3.10", - "@types/react": "16.14.8", - "@types/react-dom": "^16.9.13", + "@types/react": "^17.0.27", + "@types/react-dom": "^17.0.9", "clsx": "^1.1.1", "codemirror": "^5.49.2", "core-js": "^3.4.1", diff --git a/packages/dx-react-grid-material-ui/package.json b/packages/dx-react-grid-material-ui/package.json index e3e3077842..f1ba0db665 100644 --- a/packages/dx-react-grid-material-ui/package.json +++ b/packages/dx-react-grid-material-ui/package.json @@ -55,8 +55,10 @@ "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-react-grid": "2.7.6", "@devexpress/dx-testing": "2.7.6", - "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/icons-material": "^5.0.0", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", @@ -90,8 +92,8 @@ "@devexpress/dx-grid-core": "2.7.6", "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-react-grid": "2.7.6", - "@material-ui/core": ">=4.5.0", - "@material-ui/icons": ">=4.4.3", + "@mui/material": ">=5.0.0", + "@mui/icons-material": ">=5.0.0", "react": ">=17.0.2" } } diff --git a/packages/dx-react-scheduler-demos/package.json b/packages/dx-react-scheduler-demos/package.json index aea3dcbb75..a9b8f8df39 100644 --- a/packages/dx-react-scheduler-demos/package.json +++ b/packages/dx-react-scheduler-demos/package.json @@ -28,11 +28,13 @@ "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-react-scheduler": "2.7.6", "@devexpress/dx-react-scheduler-material-ui": "2.7.6", - "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/icons-material": "^5.0.0", "@material-ui/pickers": "^3.3.10", - "@types/react": "16.14.8", - "@types/react-dom": "^16.9.13", + "@types/react": "^17.0.27", + "@types/react-dom": "^17.0.9", "clsx": "^1.0.4", "codemirror": "^5.49.2", "core-js": "^3.4.1", diff --git a/packages/dx-react-scheduler-material-ui/package.json b/packages/dx-react-scheduler-material-ui/package.json index 193879d3ae..5380b85143 100644 --- a/packages/dx-react-scheduler-material-ui/package.json +++ b/packages/dx-react-scheduler-material-ui/package.json @@ -53,8 +53,10 @@ "@devexpress/dx-react-scheduler": "2.7.6", "@devexpress/dx-scheduler-core": "2.7.6", "@devexpress/dx-testing": "2.7.6", - "@material-ui/core": "^4.11.4", - "@material-ui/icons": "^4.11.2", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/icons-material": "^5.0.0", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", @@ -90,8 +92,8 @@ "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-react-scheduler": "2.7.6", "@devexpress/dx-scheduler-core": "2.7.6", - "@material-ui/core": ">=4.5.0", - "@material-ui/icons": ">=4.4.3", + "@mui/material": ">=5.0.0", + "@mui/icons-material": ">=5.0.0", "moment": "^2.24.0", "react": ">=17.0.2" } diff --git a/packages/dx-testing/package.json b/packages/dx-testing/package.json index a8dee0c6e0..e2f391b9ed 100644 --- a/packages/dx-testing/package.json +++ b/packages/dx-testing/package.json @@ -38,6 +38,7 @@ "@devexpress/dx-react-core": "2.7.6", "enzyme": "3.10.0", "react": "^17.0.2", + "react-dom": "^17.0.2", "util": "^0.12.1" }, "peerDependencies": { diff --git a/packages/dx-testing/src/index.js b/packages/dx-testing/src/index.js index 03aac45459..2f8c9813d3 100644 --- a/packages/dx-testing/src/index.js +++ b/packages/dx-testing/src/index.js @@ -1,3 +1,4 @@ export * from './test-utils'; +export * from './mui-utils'; export * from './setup-console'; export * from './state-helper.test-utils'; diff --git a/yarn.lock b/yarn.lock index 76c3d72c29..d87f9094b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -515,7 +515,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.10.4" -"@babel/plugin-syntax-jsx@^7.14.5": +"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201" integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw== @@ -1039,13 +1039,20 @@ core-js-pure "^3.15.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.14.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d" integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg== dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.4.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" + integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/standalone@^7.12.6": version "7.14.7" resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.14.7.tgz#68635da005d6a34a0259599e0720d2e73133ecc3" @@ -1103,11 +1110,107 @@ dependencies: "@date-io/core" "^1.3.13" +"@emotion/babel-plugin@^11.3.0": + version "11.3.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7" + integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA== + dependencies: + "@babel/helper-module-imports" "^7.12.13" + "@babel/plugin-syntax-jsx" "^7.12.13" + "@babel/runtime" "^7.13.10" + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.5" + "@emotion/serialize" "^1.0.2" + babel-plugin-macros "^2.6.1" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "^4.0.3" + +"@emotion/cache@^11.4.0": + version "11.4.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0" + integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.0.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "^4.0.3" + "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/is-prop-valid@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde" + integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ== + dependencies: + "@emotion/memoize" "^0.7.4" + +"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== + +"@emotion/react@^11.4.1": + version "11.4.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.1.tgz#a1b0b767b5bad57515ffb0cad9349614d27f4d57" + integrity sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/cache" "^11.4.0" + "@emotion/serialize" "^1.0.2" + "@emotion/sheet" "^1.0.2" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965" + integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.2.tgz#1d9ffde531714ba28e62dac6a996a8b1089719d0" + integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw== + +"@emotion/styled@^11.3.0": + version "11.3.0" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207" + integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.3.0" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/serialize" "^1.0.2" + "@emotion/utils" "^1.0.0" + +"@emotion/unitless@^0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/utils@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" + integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== + +"@emotion/weak-memoize@^0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@endemolshinegroup/cosmiconfig-typescript-loader@3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d" @@ -2564,13 +2667,13 @@ write-file-atomic "^2.3.0" "@material-ui/core@^4.11.4": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4" - integrity sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg== + version "4.12.3" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" + integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== dependencies: "@babel/runtime" "^7.4.4" "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.11.3" + "@material-ui/system" "^4.12.1" "@material-ui/types" "5.1.0" "@material-ui/utils" "^4.11.2" "@types/react-transition-group" "^4.2.0" @@ -2581,13 +2684,6 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" -"@material-ui/icons@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" - integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/pickers@^3.3.10": version "3.3.10" resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485" @@ -2622,10 +2718,10 @@ jss-plugin-vendor-prefixer "^10.5.1" prop-types "^15.7.2" -"@material-ui/system@^4.11.3": - version "4.11.3" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.3.tgz#466bc14c9986798fd325665927c963eb47cc4143" - integrity sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw== +"@material-ui/system@^4.12.1": + version "4.12.1" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" + integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== dependencies: "@babel/runtime" "^7.4.4" "@material-ui/utils" "^4.11.2" @@ -2711,6 +2807,115 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@mui/core@5.0.0-alpha.49": + version "5.0.0-alpha.49" + resolved "https://registry.yarnpkg.com/@mui/core/-/core-5.0.0-alpha.49.tgz#e74d6ec7f83f85b55d48aa05ea6b7cefff88ce1b" + integrity sha512-bZ7UgH84AuKf/IT0U+knHEelDxLV0lNVFg7rKkkDfXEwUpTtAZEtZPFJjNngapSB/4MuFjaFsttex+0DGC5Z1Q== + dependencies: + "@babel/runtime" "^7.15.4" + "@emotion/is-prop-valid" "^1.1.0" + "@mui/utils" "^5.0.1" + clsx "^1.1.1" + prop-types "^15.7.2" + react-is "^17.0.2" + +"@mui/icons-material@^5.0.0": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.0.1.tgz#fb7ffeba0b3604aab4a9b91644d2fc1aabb3b4f1" + integrity sha512-AZehR/Uvi9VodsNPk9ae1lENKrf1evqx9suiP6VIqu7NxjZOlw/m/yA2gRAMmLEmIGr7EChfi/wcXuq6BpM9vw== + dependencies: + "@babel/runtime" "^7.15.4" + +"@mui/material@^5.0.0": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.0.2.tgz#380cf0ef42c538a68158b4da19c317178b22d10f" + integrity sha512-LD2xHSjTLmbN0UoCuKTu09L/7JjpEzg+Cophf+dVJOTNoK7VI0Eqv3bmpF/9pDIk5dVKmeU9Eh4t2lW1ZifM6A== + dependencies: + "@babel/runtime" "^7.15.4" + "@mui/core" "5.0.0-alpha.49" + "@mui/system" "^5.0.2" + "@mui/types" "^7.0.0" + "@mui/utils" "^5.0.1" + "@popperjs/core" "^2.4.4" + "@types/react-transition-group" "^4.4.3" + clsx "^1.1.1" + csstype "^3.0.9" + hoist-non-react-statics "^3.3.2" + prop-types "^15.7.2" + react-is "^17.0.2" + react-transition-group "^4.4.2" + +"@mui/private-theming@^5.0.1": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.0.1.tgz#50a0ea6ad5a8d1d78072859c4bdaaa6b6584d986" + integrity sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q== + dependencies: + "@babel/runtime" "^7.15.4" + "@mui/utils" "^5.0.1" + prop-types "^15.7.2" + +"@mui/styled-engine@^5.0.1": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.1.tgz#401e3e0ff846ad1b1e7e097c8050b36d7b68343e" + integrity sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ== + dependencies: + "@babel/runtime" "^7.15.4" + "@emotion/cache" "^11.4.0" + prop-types "^15.7.2" + +"@mui/styles@^5.0.0": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.0.1.tgz#1634d08d892b5c7e85c9f84e4fc8bc02a5fb0f7a" + integrity sha512-hCtR2ZVOkoIhpTan02I4UEShnZxe59WwhKRJqauMs/addXByhAHHCNheTdiV++Irl/fyyFObmzPM0CUD3q6FIA== + dependencies: + "@babel/runtime" "^7.15.4" + "@emotion/hash" "^0.8.0" + "@mui/private-theming" "^5.0.1" + "@mui/types" "^7.0.0" + "@mui/utils" "^5.0.1" + clsx "^1.1.1" + csstype "^3.0.9" + hoist-non-react-statics "^3.3.2" + jss "^10.8.0" + jss-plugin-camel-case "^10.8.0" + jss-plugin-default-unit "^10.8.0" + jss-plugin-global "^10.8.0" + jss-plugin-nested "^10.8.0" + jss-plugin-props-sort "^10.8.0" + jss-plugin-rule-value-function "^10.8.0" + jss-plugin-vendor-prefixer "^10.8.0" + prop-types "^15.7.2" + +"@mui/system@^5.0.2": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.2.tgz#9999ab61801810ea01c44588fd0dcc1f64dfcedc" + integrity sha512-K6wMbiSEYSMeYUw7zmZ2/50JFthqtuTz4OADyKc4ic2RP8ubAf/duH/nkJ4gtsKcewU4RIub0HQHl5F77WVp4Q== + dependencies: + "@babel/runtime" "^7.15.4" + "@mui/private-theming" "^5.0.1" + "@mui/styled-engine" "^5.0.1" + "@mui/types" "^7.0.0" + "@mui/utils" "^5.0.1" + clsx "^1.1.1" + csstype "^3.0.9" + prop-types "^15.7.2" + +"@mui/types@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.0.0.tgz#a7398502bc9c508875aafcbe28aea599b2c3d203" + integrity sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung== + +"@mui/utils@^5.0.1": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.1.tgz#d4f0f41b82db6ac273920a1b5b6a4de7879271f5" + integrity sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/prop-types" "^15.7.4" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.7.2" + react-is "^17.0.2" + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -2871,6 +3076,11 @@ schema-utils "^2.6.5" source-map "^0.7.3" +"@popperjs/core@^2.4.4": + version "2.10.2" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590" + integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ== + "@reach/router@^1.3.1", "@reach/router@^1.3.4": version "1.3.4" resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c" @@ -3392,6 +3602,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== +"@types/prop-types@^15.7.4": + version "15.7.4" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" + integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== + "@types/q@^1.5.1": version "1.5.4" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24" @@ -3409,12 +3624,19 @@ dependencies: "@types/react" "*" -"@types/react-dom@^16.9.13": - version "16.9.13" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.13.tgz#5898f0ee68fe200685e6b61d3d7d8828692814d0" - integrity sha512-34Hr3XnmUSJbUVDxIw/e7dhQn2BJZhJmlAaPyPwfTQyuVS9mV/CeyghFcXyvkJXxI7notQJz8mF8FeCVvloJrA== +"@types/react-dom@^17.0.9": + version "17.0.9" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add" + integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg== + dependencies: + "@types/react" "*" + +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.2" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.2.tgz#abc4d910bff5b0bc6b3e1bec57575f6b63fd4e05" + integrity sha512-2+L0ilcAEG8udkDnvx8B0upwXFBbNnVwOsSCTxW3SDOkmar9NyEeLG0ZLa3uOEw9zyYf/fQapcnfXAVmDKlyHw== dependencies: - "@types/react" "^16" + "@types/react" "*" "@types/react-redux@^7.1.16": version "7.1.16" @@ -3426,14 +3648,14 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" -"@types/react-transition-group@^4.2.0": - version "4.4.1" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1" - integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ== +"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.3": + version "4.4.3" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.3.tgz#b0994da0a7023d67dbb4a8910a62112bc00d5688" + integrity sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg== dependencies: "@types/react" "*" -"@types/react@*", "@types/react@16.14.8", "@types/react@16.9.35", "@types/react@>=16.9.11", "@types/react@^16": +"@types/react@*", "@types/react@16.9.35", "@types/react@>=16.9.11", "@types/react@^17.0.27": version "16.9.35" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368" integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ== @@ -4905,7 +5127,7 @@ babel-plugin-lodash@^3.3.4: lodash "^4.17.10" require-package-name "^2.0.1" -babel-plugin-macros@^2.8.0: +babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -7851,16 +8073,26 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" -csstype@^2.2.0, csstype@^2.5.2: +csstype@^2.2.0: version "2.6.17" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e" integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A== +csstype@^2.5.2: + version "2.6.18" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218" + integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ== + csstype@^3.0.2: version "3.0.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw== +csstype@^3.0.9: + version "3.0.9" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b" + integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw== + cuint@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b" @@ -10271,6 +10503,11 @@ find-pkg@^0.1.0: dependencies: find-file-up "^0.1.2" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -12254,7 +12491,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -14403,67 +14640,77 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" -jss-plugin-camel-case@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz#93d2cd704bf0c4af70cc40fb52d74b8a2554b170" - integrity sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A== +jss-plugin-camel-case@^10.5.1, jss-plugin-camel-case@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.0.tgz#575fd849202d36713a6970796458e375754446c7" + integrity sha512-yxlXrXwcCdGw+H4BC187dEu/RFyW8joMcWfj8Rk9UPgWTKu2Xh7Sib4iW3xXjHe/t5phOHF1rBsHleHykWix7g== dependencies: "@babel/runtime" "^7.3.1" hyphenate-style-name "^1.0.3" - jss "10.6.0" + jss "10.8.0" -jss-plugin-default-unit@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz#af47972486819b375f0f3a9e0213403a84b5ef3b" - integrity sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w== +jss-plugin-default-unit@^10.5.1, jss-plugin-default-unit@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.0.tgz#98db5962e62abbf43f1cc111e62cb70ffb09db59" + integrity sha512-9XJV546cY9zV9OvIE/v/dOaxSi4062VfYQQfwbplRExcsU2a79Yn+qDz/4ciw6P4LV1Naq90U+OffAGRHfNq/Q== dependencies: "@babel/runtime" "^7.3.1" - jss "10.6.0" + jss "10.8.0" -jss-plugin-global@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz#3e8011f760f399cbadcca7f10a485b729c50e3ed" - integrity sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w== +jss-plugin-global@^10.5.1, jss-plugin-global@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.0.tgz#0c2b0c056087f5846d600f3332eeb7a1a8b9c9f2" + integrity sha512-H/8h/bHd4e7P0MpZ9zaUG8NQSB2ie9rWo/vcCP6bHVerbKLGzj+dsY22IY3+/FNRS8zDmUyqdZx3rD8k4nmH4w== dependencies: "@babel/runtime" "^7.3.1" - jss "10.6.0" + jss "10.8.0" -jss-plugin-nested@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz#5f83c5c337d3b38004834e8426957715a0251641" - integrity sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g== +jss-plugin-nested@^10.5.1, jss-plugin-nested@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.0.tgz#7ef9a815e9c9fbede41a8f52ce75cffb4c3b86d5" + integrity sha512-MhmINZkSxyFILcFBuDoZmP1+wj9fik/b9SsjoaggkGjdvMQCES21mj4K5ZnRGVm448gIXyi9j/eZjtDzhaHUYQ== dependencies: "@babel/runtime" "^7.3.1" - jss "10.6.0" + jss "10.8.0" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz#297879f35f9fe21196448579fee37bcde28ce6bc" - integrity sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw== +jss-plugin-props-sort@^10.5.1, jss-plugin-props-sort@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.0.tgz#2a83e8ca80d72828495bad57b485f7d55a33543b" + integrity sha512-VY+Wt5WX5GMsXDmd+Ts8+O16fpiCM81svbox++U3LDbJSM/g9FoMx3HPhwUiDfmgHL9jWdqEuvSl/JAk+mh6mQ== dependencies: "@babel/runtime" "^7.3.1" - jss "10.6.0" + jss "10.8.0" -jss-plugin-rule-value-function@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz#3c1a557236a139d0151e70a82c810ccce1c1c5ea" - integrity sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA== +jss-plugin-rule-value-function@^10.5.1, jss-plugin-rule-value-function@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.0.tgz#e011ed180789229e7ea8f75c222d34810bcab520" + integrity sha512-R8N8Ma6Oye1F9HroiUuHhVjpPsVq97uAh+rMI6XwKLqirIu2KFb5x33hPj+vNBMxSHc9jakhf5wG0BbQ7fSDOg== dependencies: "@babel/runtime" "^7.3.1" - jss "10.6.0" + jss "10.8.0" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz#e1fcd499352846890c38085b11dbd7aa1c4f2c78" - integrity sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ== +jss-plugin-vendor-prefixer@^10.5.1, jss-plugin-vendor-prefixer@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.0.tgz#024b6d77be50b68e5dfca2c75f68091d8b722d61" + integrity sha512-G1zD0J8dFwKZQ+GaZaay7A/Tg7lhDw0iEkJ/iFFA5UPuvZFpMprCMQttXcTBhLlhhWnyZ8YPn4yqp+amrhQekw== dependencies: "@babel/runtime" "^7.3.1" css-vendor "^2.0.8" - jss "10.6.0" + jss "10.8.0" -jss@10.6.0, jss@^10.0.0, jss@^10.5.1: +jss@10.8.0, jss@^10.5.1, jss@^10.8.0: + version "10.8.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.0.tgz#5063ee73aabd9f228ea3849df7962f0d2e213a42" + integrity sha512-6fAMLJrVQ8epM5ghghxWqCwRR0ZamP2cKbOAtzPudcCMSNdAqtvmzQvljUZYR8OXJIeb/IpZeOXA1sDXms4R1w== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^3.0.2" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + +jss@^10.0.0: version "10.6.0" resolved "https://registry.yarnpkg.com/jss/-/jss-10.6.0.tgz#d92ff9d0f214f65ca1718591b68e107be4774149" integrity sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw== @@ -19116,7 +19363,7 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.1, react-transition-g prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-transition-group@^4.0.0, react-transition-group@^4.4.0: +react-transition-group@^4.0.0, react-transition-group@^4.4.0, react-transition-group@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== @@ -21645,6 +21892,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylis@^4.0.3: + version "4.0.10" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" + integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== + subscriptions-transport-ws@^0.9.18: version "0.9.19" resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.19.tgz#10ca32f7e291d5ee8eb728b9c02e43c52606cdcf" From 24197165f3aaf42b38176872ae5ec021ec8c3abc Mon Sep 17 00:00:00 2001 From: MikeVitik Date: Fri, 8 Oct 2021 12:03:44 +0300 Subject: [PATCH 02/35] add missing MUI5 test utils --- packages/dx-testing/src/mui-utils.js | 44 ++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 packages/dx-testing/src/mui-utils.js diff --git a/packages/dx-testing/src/mui-utils.js b/packages/dx-testing/src/mui-utils.js new file mode 100644 index 0000000000..531ae4be70 --- /dev/null +++ b/packages/dx-testing/src/mui-utils.js @@ -0,0 +1,44 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { shallow, mount } from 'enzyme'; + +export function createShallow() { + return Component => shallow(Component).dive(); +} + +export function getClasses(element) { + const { useStyles } = element.type; + let classes; + + function Listener() { + classes = useStyles(element.props); + return null; + } + + shallow(React.createElement(Listener, null)); + return classes; +} +export function createMount() { + const attachTo = document.createElement('div'); + attachTo.className = 'app'; + attachTo.setAttribute('id', 'app'); + document.body.insertBefore(attachTo, document.body.firstChild); + + const mountWithContext = function mountWithContext(node, localOptions = {}) { + const { disableUnnmount = false } = localOptions; + if (!disableUnnmount) { + ReactDOM.unmountComponentAtNode(attachTo); + } + return mount(node, { + attachTo, + }); + }; + + mountWithContext.attachTo = attachTo; + mountWithContext.cleanUp = () => { + ReactDOM.unmountComponentAtNode(attachTo); + attachTo.parentElement.removeChild(attachTo); + }; + + return mountWithContext; +} From a7d35d932a9e9333e15ae5a7c31d4372a8af85e4 Mon Sep 17 00:00:00 2001 From: Smirnova Yuliya Date: Fri, 8 Oct 2021 15:00:49 +0300 Subject: [PATCH 03/35] update packages --- packages/dx-react-chart-demos/package.json | 1 + packages/dx-react-chart-material-ui/package.json | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/dx-react-chart-demos/package.json b/packages/dx-react-chart-demos/package.json index e04fb97de5..2cc68b7cc2 100644 --- a/packages/dx-react-chart-demos/package.json +++ b/packages/dx-react-chart-demos/package.json @@ -36,6 +36,7 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/material": "^5.0.0", + "@mui/styles": "^5.0.0", "@mui/icons-material": "^5.0.0", "@types/react": "^17.0.27", "@types/react-dom": "^17.0.9", diff --git a/packages/dx-react-chart-material-ui/package.json b/packages/dx-react-chart-material-ui/package.json index 3a2febb64a..ebf97cfc89 100644 --- a/packages/dx-react-chart-material-ui/package.json +++ b/packages/dx-react-chart-material-ui/package.json @@ -56,8 +56,6 @@ "@material-ui/core": "^4.11.4", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "@mui/material": "^5.0.0", - "@mui/styles": "^5.0.0", "@mui/icons-material": "^5.0.0", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", @@ -85,6 +83,8 @@ "rollup-plugin-license": "^0.12.1" }, "dependencies": { + "@mui/material": "^5.0.0", + "@mui/styles": "^5.0.0", "clsx": "^1.0.4", "prop-types": "^15.7.2" }, From c02fffe3982b7cf86dbebe81438fb44e7c4a4267 Mon Sep 17 00:00:00 2001 From: MikeVitik Date: Fri, 8 Oct 2021 16:04:41 +0300 Subject: [PATCH 04/35] fix charts demo --- .../scripts/helper-files-parser.js | 11 ++- .../material-ui/demo-source-data.json | 2 +- .../dx-react-chart-material-ui/package.json | 5 +- .../src/templates/legend/item.jsx | 17 ++-- yarn.lock | 98 +++---------------- 5 files changed, 28 insertions(+), 105 deletions(-) diff --git a/packages/dx-demo-shell/scripts/helper-files-parser.js b/packages/dx-demo-shell/scripts/helper-files-parser.js index 62bf2ac8b4..4a47d96f21 100644 --- a/packages/dx-demo-shell/scripts/helper-files-parser.js +++ b/packages/dx-demo-shell/scripts/helper-files-parser.js @@ -16,12 +16,13 @@ const retrieveImportFiles = (imports, regex) => imports .filter(r => !!r) .map(r => r[1]); -const knownDeepImports = ['@material-ui/core', '@material-ui/icons', '@material-ui/styles']; +// const knownDeepImports = ['@mui/material', '@mui/icons-material', '@material-ui/styles']; +const knownDeepImports = ['@mui/material', '@mui/icons-material', '@mui/styles']; const dependencies = { - '"@material-ui/core"': ['"@material-ui/icons"'], + '"@mui/material"': ['"@mui/icons-material"'], '"@devexpress/dx-react-chart-material-ui"': [ '"@devexpress/dx-react-chart"', - '"@material-ui/icons"', + '"@mui/icons-material"', ], '"@devexpress/dx-react-chart-bootstrap4"': ['"@devexpress/dx-react-chart"'], '"@devexpress/dx-react-chart"': ['"@devexpress/dx-react-core"'], @@ -32,12 +33,12 @@ const dependencies = { '"@devexpress/dx-react-grid-bootstrap4"': ['"@devexpress/dx-react-grid"'], '"@devexpress/dx-react-grid-material-ui"': [ '"@devexpress/dx-react-grid"', - '"@material-ui/icons"', + '"@mui/icons-material"', ], '"@devexpress/dx-react-grid"': ['"@devexpress/dx-react-core"'], '"@devexpress/dx-react-scheduler-material-ui"': [ '"@devexpress/dx-react-scheduler"', - '"@material-ui/icons"', + '"@mui/icons-material"', ], '"@devexpress/dx-react-scheduler"': ['"@devexpress/dx-react-core"'], }; diff --git a/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-source-data.json b/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-source-data.json index 5047cfd872..bf4af02bf2 100644 --- a/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-source-data.json +++ b/packages/dx-react-chart-demos/src/theme-sources/material-ui/demo-source-data.json @@ -1,4 +1,4 @@ { - "additionalImports": "\nimport Paper from '@material-ui/core/Paper';", + "additionalImports": "\nimport Paper from '@mui/material/Paper';", "wrapperTag": "Paper" } diff --git a/packages/dx-react-chart-material-ui/package.json b/packages/dx-react-chart-material-ui/package.json index ebf97cfc89..f2c2804400 100644 --- a/packages/dx-react-chart-material-ui/package.json +++ b/packages/dx-react-chart-material-ui/package.json @@ -53,9 +53,10 @@ "@babel/preset-react": "^7.8.3", "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-testing": "2.7.6", - "@material-ui/core": "^4.11.4", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@mui/styles": "^5.0.0", "@mui/icons-material": "^5.0.0", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", @@ -83,8 +84,6 @@ "rollup-plugin-license": "^0.12.1" }, "dependencies": { - "@mui/material": "^5.0.0", - "@mui/styles": "^5.0.0", "clsx": "^1.0.4", "prop-types": "^15.7.2" }, diff --git a/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx b/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx index 8016b3223d..6b4d923306 100644 --- a/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx +++ b/packages/dx-react-chart-material-ui/src/templates/legend/item.jsx @@ -1,15 +1,12 @@ import ListItem from '@mui/material/ListItem'; import { withClassName } from '../utils'; -const styles = (theme) => { - debugger; - return ({ - root: { - alignItems: 'center', - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }, - }); -}; +const styles = theme => ({ + root: { + alignItems: 'center', + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + }, +}); export const Item = withClassName(styles, { name: 'LegendItem' })(ListItem); diff --git a/yarn.lock b/yarn.lock index d87f9094b2..5604a4af6d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1046,7 +1046,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.4.4": +"@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw== @@ -2666,24 +2666,6 @@ npmlog "^4.1.2" write-file-atomic "^2.3.0" -"@material-ui/core@^4.11.4": - version "4.12.3" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" - integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.12.1" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - "@types/react-transition-group" "^4.2.0" - clsx "^1.0.4" - hoist-non-react-statics "^3.3.2" - popper.js "1.16.1-lts" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - react-transition-group "^4.4.0" - "@material-ui/pickers@^3.3.10": version "3.3.10" resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485" @@ -2696,52 +2678,6 @@ react-transition-group "^4.0.0" rifm "^0.7.0" -"@material-ui/styles@^4.11.4": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" - integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.8.0" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - csstype "^2.5.2" - hoist-non-react-statics "^3.3.2" - jss "^10.5.1" - jss-plugin-camel-case "^10.5.1" - jss-plugin-default-unit "^10.5.1" - jss-plugin-global "^10.5.1" - jss-plugin-nested "^10.5.1" - jss-plugin-props-sort "^10.5.1" - jss-plugin-rule-value-function "^10.5.1" - jss-plugin-vendor-prefixer "^10.5.1" - prop-types "^15.7.2" - -"@material-ui/system@^4.12.1": - version "4.12.1" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" - integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - csstype "^2.5.2" - prop-types "^15.7.2" - -"@material-ui/types@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" - integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== - -"@material-ui/utils@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" - integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== - dependencies: - "@babel/runtime" "^7.4.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - "@mdx-js/util@^2.0.0-next.8": version "2.0.0-next.8" resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-2.0.0-next.8.tgz#66ecc27b78e07a3ea2eb1a8fc5a99dfa0ba96690" @@ -3648,7 +3584,7 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" -"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.3": +"@types/react-transition-group@^4.4.3": version "4.4.3" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.3.tgz#b0994da0a7023d67dbb4a8910a62112bc00d5688" integrity sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg== @@ -8078,11 +8014,6 @@ csstype@^2.2.0: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e" integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A== -csstype@^2.5.2: - version "2.6.18" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218" - integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ== - csstype@^3.0.2: version "3.0.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" @@ -14640,7 +14571,7 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" -jss-plugin-camel-case@^10.5.1, jss-plugin-camel-case@^10.8.0: +jss-plugin-camel-case@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.0.tgz#575fd849202d36713a6970796458e375754446c7" integrity sha512-yxlXrXwcCdGw+H4BC187dEu/RFyW8joMcWfj8Rk9UPgWTKu2Xh7Sib4iW3xXjHe/t5phOHF1rBsHleHykWix7g== @@ -14649,7 +14580,7 @@ jss-plugin-camel-case@^10.5.1, jss-plugin-camel-case@^10.8.0: hyphenate-style-name "^1.0.3" jss "10.8.0" -jss-plugin-default-unit@^10.5.1, jss-plugin-default-unit@^10.8.0: +jss-plugin-default-unit@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.0.tgz#98db5962e62abbf43f1cc111e62cb70ffb09db59" integrity sha512-9XJV546cY9zV9OvIE/v/dOaxSi4062VfYQQfwbplRExcsU2a79Yn+qDz/4ciw6P4LV1Naq90U+OffAGRHfNq/Q== @@ -14657,7 +14588,7 @@ jss-plugin-default-unit@^10.5.1, jss-plugin-default-unit@^10.8.0: "@babel/runtime" "^7.3.1" jss "10.8.0" -jss-plugin-global@^10.5.1, jss-plugin-global@^10.8.0: +jss-plugin-global@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.0.tgz#0c2b0c056087f5846d600f3332eeb7a1a8b9c9f2" integrity sha512-H/8h/bHd4e7P0MpZ9zaUG8NQSB2ie9rWo/vcCP6bHVerbKLGzj+dsY22IY3+/FNRS8zDmUyqdZx3rD8k4nmH4w== @@ -14665,7 +14596,7 @@ jss-plugin-global@^10.5.1, jss-plugin-global@^10.8.0: "@babel/runtime" "^7.3.1" jss "10.8.0" -jss-plugin-nested@^10.5.1, jss-plugin-nested@^10.8.0: +jss-plugin-nested@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.0.tgz#7ef9a815e9c9fbede41a8f52ce75cffb4c3b86d5" integrity sha512-MhmINZkSxyFILcFBuDoZmP1+wj9fik/b9SsjoaggkGjdvMQCES21mj4K5ZnRGVm448gIXyi9j/eZjtDzhaHUYQ== @@ -14674,7 +14605,7 @@ jss-plugin-nested@^10.5.1, jss-plugin-nested@^10.8.0: jss "10.8.0" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.5.1, jss-plugin-props-sort@^10.8.0: +jss-plugin-props-sort@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.0.tgz#2a83e8ca80d72828495bad57b485f7d55a33543b" integrity sha512-VY+Wt5WX5GMsXDmd+Ts8+O16fpiCM81svbox++U3LDbJSM/g9FoMx3HPhwUiDfmgHL9jWdqEuvSl/JAk+mh6mQ== @@ -14682,7 +14613,7 @@ jss-plugin-props-sort@^10.5.1, jss-plugin-props-sort@^10.8.0: "@babel/runtime" "^7.3.1" jss "10.8.0" -jss-plugin-rule-value-function@^10.5.1, jss-plugin-rule-value-function@^10.8.0: +jss-plugin-rule-value-function@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.0.tgz#e011ed180789229e7ea8f75c222d34810bcab520" integrity sha512-R8N8Ma6Oye1F9HroiUuHhVjpPsVq97uAh+rMI6XwKLqirIu2KFb5x33hPj+vNBMxSHc9jakhf5wG0BbQ7fSDOg== @@ -14691,7 +14622,7 @@ jss-plugin-rule-value-function@^10.5.1, jss-plugin-rule-value-function@^10.8.0: jss "10.8.0" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.5.1, jss-plugin-vendor-prefixer@^10.8.0: +jss-plugin-vendor-prefixer@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.0.tgz#024b6d77be50b68e5dfca2c75f68091d8b722d61" integrity sha512-G1zD0J8dFwKZQ+GaZaay7A/Tg7lhDw0iEkJ/iFFA5UPuvZFpMprCMQttXcTBhLlhhWnyZ8YPn4yqp+amrhQekw== @@ -14700,7 +14631,7 @@ jss-plugin-vendor-prefixer@^10.5.1, jss-plugin-vendor-prefixer@^10.8.0: css-vendor "^2.0.8" jss "10.8.0" -jss@10.8.0, jss@^10.5.1, jss@^10.8.0: +jss@10.8.0, jss@^10.8.0: version "10.8.0" resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.0.tgz#5063ee73aabd9f228ea3849df7962f0d2e213a42" integrity sha512-6fAMLJrVQ8epM5ghghxWqCwRR0ZamP2cKbOAtzPudcCMSNdAqtvmzQvljUZYR8OXJIeb/IpZeOXA1sDXms4R1w== @@ -18158,11 +18089,6 @@ pnp-webpack-plugin@^1.6.4: dependencies: ts-pnp "^1.1.6" -popper.js@1.16.1-lts: - version "1.16.1-lts" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" - integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== - popper.js@^1.14.4: version "1.16.1" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" @@ -19240,7 +19166,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react- resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -"react-is@^16.12.0 || ^17.0.0", "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: +"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -19363,7 +19289,7 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.1, react-transition-g prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-transition-group@^4.0.0, react-transition-group@^4.4.0, react-transition-group@^4.4.2: +react-transition-group@^4.0.0, react-transition-group@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== From 8b9db1f6c5414800f373fb618bd7ee348929bcf6 Mon Sep 17 00:00:00 2001 From: MikeVitik Date: Mon, 11 Oct 2021 19:21:33 +0300 Subject: [PATCH 05/35] migrate grid and scheduler exept tests --- packages/dx-demo-shell/.eslintrc.json | 2 +- packages/dx-react-chart-demos/.eslintrc.json | 2 +- .../dx-react-chart-material-ui/.eslintrc.json | 2 +- .../dx-react-chart-material-ui/package.json | 3 + packages/dx-react-common/.eslintrc.json | 2 +- packages/dx-react-grid-demos/.eslintrc.json | 2 +- packages/dx-react-grid-demos/package.json | 3 +- .../material-ui/customization.partial.jsx | 8 +- .../table-header-content-template.jsx | 10 +- .../grid-basic/material-ui/table-template.jsx | 8 +- .../material-ui/resizing-mode.jsx | 16 +-- .../grid-data-types/material-ui/editors.jsx | 10 +- .../material-ui/tooltip.partial.jsx | 2 +- .../detail-row-editing.partial.jsx | 54 ++++---- .../inline-cell-editing.partial.jsx | 16 +-- .../material-ui/popup-editing.partial.jsx | 41 +++--- .../advanced-customization.partial.jsx | 2 +- .../material-ui/demo.jsx | 4 +- .../material-ui/demo.jsx | 32 ++--- .../material-ui/demo.tsx | 9 +- .../material-ui/demo.jsx | 4 +- .../material-ui/advanced-filter-row.jsx | 8 +- .../material-ui/custom-filter-row.jsx | 8 +- .../material-ui/custom-sort-label.jsx | 8 +- .../components/currency-type-provider.jsx | 4 +- .../components/highlighted-cell.jsx | 4 +- .../material-ui/components/loading.jsx | 2 +- .../components/percent-type-provider.jsx | 4 +- .../components/progress-bar-cell.jsx | 4 +- .../material-ui/demo-container.jsx | 24 ++-- .../material-ui/demo-source-data.json | 4 +- .../dx-react-grid-material-ui/.eslintrc.json | 2 +- .../dx-react-grid-material-ui/package.json | 4 + .../src/plugins/table.jsx | 6 +- .../templates/column-chooser/container.jsx | 2 +- .../src/templates/column-chooser/item.jsx | 8 +- .../templates/column-chooser/item.test.jsx | 6 +- .../src/templates/column-chooser/overlay.jsx | 2 +- .../templates/column-chooser/overlay.test.jsx | 2 +- .../column-chooser/toggle-button.jsx | 12 +- .../column-chooser/toggle-button.test.jsx | 4 +- .../src/templates/drag-drop.jsx | 4 +- .../src/templates/drag-drop.test.jsx | 2 +- .../src/templates/empty-message.jsx | 4 +- .../src/templates/empty-message.test.jsx | 2 +- .../src/templates/export-panel/menu-item.jsx | 2 +- .../templates/export-panel/menu-item.test.jsx | 2 +- .../src/templates/export-panel/menu.jsx | 2 +- .../src/templates/export-panel/menu.test.jsx | 2 +- .../templates/export-panel/toggle-button.jsx | 12 +- .../export-panel/toggle-button.test.jsx | 4 +- .../src/templates/filter-row/editor.jsx | 4 +- .../src/templates/filter-row/editor.test.jsx | 4 +- .../templates/filter-row/filter-selector.jsx | 10 +- .../filter-row/filter-selector.test.jsx | 4 +- .../filter-selector/toggle-button.jsx | 4 +- .../src/templates/filter-row/icon.jsx | 4 +- .../src/templates/filter-row/icon.test.jsx | 4 +- .../src/templates/group-panel-container.jsx | 2 +- .../templates/group-panel-container.test.jsx | 2 +- .../templates/group-panel-empty-message.jsx | 2 +- .../group-panel-empty-message.test.jsx | 2 +- .../src/templates/group-panel-item.jsx | 6 +- .../src/templates/group-panel-item.test.jsx | 6 +- .../src/templates/layout.jsx | 2 +- .../paging-panel/page-size-selector.jsx | 8 +- .../paging-panel/page-size-selector.test.jsx | 6 +- .../src/templates/paging-panel/pager.jsx | 2 +- .../src/templates/paging-panel/pager.test.jsx | 2 +- .../src/templates/paging-panel/pagination.jsx | 14 +-- .../paging-panel/pagination.test.jsx | 6 +- .../src/templates/search-panel-input.jsx | 8 +- .../src/templates/search-panel-input.test.jsx | 2 +- .../table-band-header/banded-header-cell.jsx | 2 +- .../banded-header-cell.test.jsx | 2 +- .../src/templates/table-band-header/cell.jsx | 4 +- .../templates/table-band-header/cell.test.jsx | 2 +- .../table-band-header/invisible-cell.jsx | 4 +- .../src/templates/table-band-header/row.jsx | 4 +- .../templates/table-band-header/row.test.jsx | 2 +- .../src/templates/table-cell.jsx | 4 +- .../src/templates/table-cell.test.jsx | 4 +- .../src/templates/table-container.jsx | 2 +- .../src/templates/table-container.test.jsx | 2 +- .../src/templates/table-detail-cell.jsx | 4 +- .../src/templates/table-detail-cell.test.jsx | 2 +- .../templates/table-detail-toggle-cell.jsx | 15 +-- .../table-detail-toggle-cell.test.jsx | 8 +- .../src/templates/table-edit-cell.jsx | 6 +- .../src/templates/table-edit-cell.test.jsx | 6 +- .../src/templates/table-edit-command-cell.jsx | 6 +- .../table-edit-command-cell.test.jsx | 2 +- .../src/templates/table-filter-cell.jsx | 4 +- .../src/templates/table-filter-cell.test.jsx | 2 +- .../src/templates/table-fixed-cell.jsx | 2 +- .../src/templates/table-fixed-cell.test.jsx | 2 +- .../src/templates/table-focus-cell.jsx | 2 +- .../src/templates/table-focus-cell.test.jsx | 2 +- .../src/templates/table-focus-row.jsx | 2 +- .../src/templates/table-focus-row.test.jsx | 2 +- .../src/templates/table-group-cell/cell.jsx | 4 +- .../templates/table-group-cell/cell.test.jsx | 4 +- .../templates/table-group-cell/container.jsx | 2 +- .../table-group-cell/container.test.jsx | 2 +- .../templates/table-group-cell/content.jsx | 2 +- .../src/templates/table-group-cell/icon.jsx | 10 +- .../table-group-cell/indent-cell.jsx | 4 +- .../table-group-cell/indent-cell.test.jsx | 2 +- .../table-group-cell/inline-summary.jsx | 2 +- .../table-group-cell/inline-summary.test.jsx | 2 +- .../src/templates/table-group-cell/row.jsx | 2 +- .../templates/table-group-cell/row.test.jsx | 2 +- .../table-group-cell/summary-cell.test.jsx | 2 +- .../src/templates/table-header-cell.test.jsx | 4 +- .../table-header-cell/cell-layout.jsx | 4 +- .../templates/table-header-cell/content.jsx | 2 +- .../table-header-cell/content.test.jsx | 2 +- .../table-header-cell/group-button.jsx | 4 +- .../table-header-cell/group-button.test.jsx | 2 +- .../table-header-cell/resizing-control.jsx | 6 +- .../resizing-control.test.jsx | 2 +- .../table-header-cell/sort-label.jsx | 6 +- .../table-header-cell/sort-label.test.jsx | 6 +- .../src/templates/table-header-cell/title.jsx | 2 +- .../table-header-cell/title.test.jsx | 2 +- .../src/templates/table-invisible-row.jsx | 2 +- .../src/templates/table-listener-cell.jsx | 2 +- .../src/templates/table-no-data-cell.jsx | 4 +- .../src/templates/table-no-data-cell.test.jsx | 2 +- .../src/templates/table-row.jsx | 2 +- .../src/templates/table-row.test.jsx | 2 +- .../src/templates/table-select-all-cell.jsx | 6 +- .../templates/table-select-all-cell.test.jsx | 4 +- .../src/templates/table-select-cell.jsx | 6 +- .../src/templates/table-select-cell.test.jsx | 4 +- .../src/templates/table-select-row.jsx | 4 +- .../src/templates/table-select-row.test.jsx | 4 +- .../src/templates/table-skeleton-cell.jsx | 4 +- .../templates/table-skeleton-cell.test.jsx | 2 +- .../src/templates/table-stub-cell.jsx | 4 +- .../src/templates/table-stub-cell.test.jsx | 2 +- .../src/templates/table-stub-row.jsx | 2 +- .../src/templates/table-stub-row.test.jsx | 2 +- .../src/templates/table-summary-item.jsx | 2 +- .../src/templates/table-summary-item.test.jsx | 2 +- .../src/templates/table-tree-cell.jsx | 4 +- .../src/templates/table-tree-cell.test.jsx | 2 +- .../src/templates/table-tree-checkbox.jsx | 4 +- .../templates/table-tree-checkbox.test.jsx | 4 +- .../src/templates/table-tree-content.jsx | 2 +- .../src/templates/table-tree-content.test.jsx | 2 +- .../templates/table-tree-expand-button.jsx | 10 +- .../table-tree-expand-button.test.jsx | 4 +- .../src/templates/table-tree-indent.jsx | 2 +- .../src/templates/table.jsx | 4 +- .../src/templates/table.test.jsx | 2 +- .../src/templates/toolbar/toolbar.jsx | 4 +- .../src/templates/toolbar/toolbar.test.jsx | 2 +- .../src/templates/utils.jsx | 8 +- .../src/utils/get-selection-color.jsx | 8 +- .../dx-react-scheduler-demos/.eslintrc.json | 2 +- .../dx-react-scheduler-demos/package.json | 5 +- .../src/demo-data/resources.js | 2 +- .../src/demo-data/tasks.js | 2 +- .../material-ui/week-view.jsx | 2 +- .../material-ui/basic-setup.jsx | 2 +- .../material-ui/custom-template.jsx | 22 ++-- .../scheduler-basic/material-ui/day.jsx | 2 +- .../scheduler-basic/material-ui/month.jsx | 2 +- .../material-ui/simple-template.jsx | 2 +- .../scheduler-basic/material-ui/week.jsx | 2 +- .../material-ui/zero-duration.jsx | 2 +- .../material-ui/current-time-indicator.jsx | 18 +-- .../material-ui/customization.jsx | 18 +-- .../material-ui/controlled.jsx | 2 +- .../material-ui/uncontrolled.jsx | 2 +- .../material-ui/controlled.jsx | 2 +- .../material-ui/copy-after-dragdrop.jsx | 2 +- .../material-ui/delete-confirmation.jsx | 2 +- .../material-ui/drag-drop.jsx | 2 +- .../material-ui/editing-features.jsx | 12 +- .../material-ui/form-customization.jsx | 2 +- .../material-ui/uncontrolled.jsx | 2 +- .../material-ui/demo.jsx | 36 +++--- .../material-ui/demo.jsx | 85 ++++++------- .../material-ui/demo.tsx | 20 +-- .../material-ui/demo.jsx | 26 ++-- .../material-ui/demo.jsx | 22 ++-- .../material-ui/demo.jsx | 6 +- .../scheduler-grouping/material-ui/basic.jsx | 4 +- .../scheduler-grouping/material-ui/custom.jsx | 23 ++-- .../material-ui/editing.jsx | 4 +- .../material-ui/group-by-dates.jsx | 10 +- .../material-ui/group-orientation.jsx | 4 +- .../material-ui/custom-formatting.jsx | 4 +- .../material-ui/locale.jsx | 8 +- .../material-ui/basic.jsx | 2 +- .../scheduler-resources/material-ui/basic.jsx | 8 +- .../material-ui/editing.jsx | 2 +- .../material-ui/controlled.jsx | 10 +- .../scheduler-tooltip/material-ui/custom.jsx | 14 +-- .../material-ui/uncontrolled.jsx | 2 +- .../material-ui/basic.tsx | 2 +- .../material-ui/controlled.jsx | 2 +- .../material-ui/external-control.jsx | 8 +- .../material-ui/uncontrolled.jsx | 2 +- .../material-ui/demo-container.jsx | 24 ++-- .../material-ui/demo-source-data.json | 5 +- .../.eslintrc.json | 2 +- .../package.json | 7 +- .../src/plugins/appointment-tooltip.jsx | 2 +- .../src/plugins/appointments.jsx | 2 +- .../src/templates/all-day-panel/cell.jsx | 8 +- .../src/templates/all-day-panel/cell.test.jsx | 2 +- .../src/templates/all-day-panel/container.jsx | 2 +- .../src/templates/all-day-panel/layout.jsx | 6 +- .../templates/all-day-panel/layout.test.jsx | 2 +- .../templates/all-day-panel/title-cell.jsx | 4 +- .../all-day-panel/title-cell.test.jsx | 2 +- .../appointment-form/basic/layout.jsx | 4 +- .../appointment-form/basic/layout.test.jsx | 2 +- .../basic/resource-editor.jsx | 8 +- .../basic/resource-editor.test.jsx | 4 +- .../command/cancel-button.jsx | 8 +- .../command/cancel-button.test.jsx | 4 +- .../command/command-button.test.jsx | 2 +- .../command/delete-button.jsx | 8 +- .../command/delete-button.test.jsx | 4 +- .../appointment-form/command/layout.jsx | 4 +- .../appointment-form/command/layout.test.jsx | 2 +- .../appointment-form/command/save-button.jsx | 4 +- .../command/save-button.test.jsx | 2 +- .../common/boolean-editor.jsx | 6 +- .../common/boolean-editor.test.jsx | 4 +- .../appointment-form/common/date-editor.jsx | 26 ++-- .../common/date-editor.test.jsx | 14 +-- .../appointment-form/common/label.jsx | 4 +- .../appointment-form/common/label.test.jsx | 2 +- .../appointment-form/common/text-editor.jsx | 4 +- .../common/text-editor.test.jsx | 2 +- .../src/templates/appointment-form/layout.jsx | 2 +- .../appointment-form/layout.test.jsx | 2 +- .../templates/appointment-form/overlay.jsx | 4 +- .../appointment-form/overlay.test.jsx | 2 +- .../appointment-form/recurrence/layout.jsx | 2 +- .../recurrence/layout.test.jsx | 2 +- .../recurrence/layouts/daily.test.jsx | 2 +- .../recurrence/layouts/interval-editor.jsx | 6 +- .../layouts/interval-editor.test.jsx | 2 +- .../recurrence/layouts/monthly.jsx | 2 +- .../recurrence/layouts/monthly.test.jsx | 2 +- .../recurrence/layouts/weekly.jsx | 2 +- .../recurrence/layouts/weekly.test.jsx | 2 +- .../recurrence/layouts/yearly.jsx | 2 +- .../recurrence/layouts/yearly.test.jsx | 2 +- .../radio-group/change-month-editor.jsx | 10 +- .../radio-group/change-month-editor.test.jsx | 2 +- .../radio-group/change-week-number-editor.jsx | 10 +- .../change-week-number-editor.test.jsx | 2 +- .../radio-group/end-repeat-editor.jsx | 12 +- .../radio-group/end-repeat-editor.test.jsx | 4 +- .../recurrence/radio-group/monthly-editor.jsx | 10 +- .../radio-group/monthly-editor.test.jsx | 4 +- .../radio-group/radio-group.test.jsx | 2 +- .../recurrence/radio-group/yealy-editor.jsx | 2 +- .../radio-group/yearly-editor.test.jsx | 2 +- .../recurrence/weekly-recurrence-selector.jsx | 6 +- .../weekly-recurrence-selector.test.jsx | 4 +- .../appointment-tooltip/command-button.jsx | 13 +- .../command-button.test.jsx | 10 +- .../templates/appointment-tooltip/content.jsx | 8 +- .../appointment-tooltip/content.test.jsx | 6 +- .../templates/appointment-tooltip/header.jsx | 2 +- .../appointment-tooltip/header.test.jsx | 2 +- .../templates/appointment-tooltip/layout.jsx | 4 +- .../appointment-tooltip/layout.test.jsx | 4 +- .../appointment/appointment-content.test.jsx | 2 +- .../src/templates/appointment/appointment.jsx | 2 +- .../appointment/appointment.test.jsx | 6 +- .../src/templates/appointment/container.jsx | 2 +- .../appointment/horizontal-appointment.jsx | 4 +- .../horizontal-appointment.test.jsx | 2 +- .../templates/appointment/split-indicator.jsx | 2 +- .../appointment/split-indicator.test.jsx | 2 +- .../appointment/vertical-appointment.jsx | 4 +- .../appointment/vertical-appointment.test.jsx | 2 +- .../src/templates/common/dialog/button.jsx | 2 +- .../templates/common/dialog/button.test.jsx | 2 +- .../src/templates/common/dialog/overlay.jsx | 4 +- .../templates/common/dialog/overlay.test.jsx | 4 +- .../templates/common/overlay-container.jsx | 2 +- .../common/overlay-container.test.jsx | 2 +- .../templates/common/select/filled-select.jsx | 6 +- .../common/select/filled-select.test.jsx | 4 +- .../common/select/outlined-select.jsx | 8 +- .../common/select/outlined-select.test.jsx | 4 +- .../templates/common/select/select.test.jsx | 2 +- .../templates/confirmation-dialog/layout.jsx | 8 +- .../confirmation-dialog/layout.test.jsx | 2 +- .../src/templates/constants.js | 2 +- .../current-time-indicator/indicator.jsx | 2 +- .../current-time-indicator/indicator.test.jsx | 6 +- .../date-navigator/calendar/cell.jsx | 4 +- .../date-navigator/calendar/cell.test.jsx | 2 +- .../date-navigator/calendar/header-cell.jsx | 4 +- .../calendar/header-cell.test.jsx | 2 +- .../date-navigator/calendar/navigator.jsx | 4 +- .../calendar/navigator.test.jsx | 2 +- .../date-navigator/calendar/root.test.jsx | 2 +- .../templates/date-navigator/calendar/row.jsx | 2 +- .../date-navigator/calendar/table.jsx | 8 +- .../date-navigator/calendar/table.test.jsx | 2 +- .../date-navigator/calendar/text.jsx | 4 +- .../date-navigator/calendar/text.test.jsx | 2 +- .../date-navigator/navigation-button.jsx | 10 +- .../date-navigator/navigation-button.test.jsx | 6 +- .../templates/date-navigator/open-button.jsx | 10 +- .../date-navigator/open-button.test.jsx | 6 +- .../src/templates/date-navigator/overlay.jsx | 2 +- .../src/templates/date-navigator/root.jsx | 2 +- .../templates/date-navigator/root.test.jsx | 2 +- .../src/templates/drag-drop/appointments.jsx | 4 +- .../templates/drag-drop/appointments.test.jsx | 6 +- .../src/templates/drag-drop/container.jsx | 2 +- .../src/templates/drag-drop/resize.jsx | 2 +- .../src/templates/drag-drop/resize.test.jsx | 2 +- .../templates/edit-recurrence-menu/layout.jsx | 16 +-- .../edit-recurrence-menu/layout.test.jsx | 2 +- .../src/templates/grouping-panel/cell.jsx | 4 +- .../templates/grouping-panel/cell.test.jsx | 6 +- .../grouping-panel/horizontal-layout.test.jsx | 2 +- .../grouping-panel/vertical-layout.jsx | 6 +- .../grouping-panel/vertical-layout.test.jsx | 2 +- .../src/templates/layout.jsx | 2 +- .../src/templates/layout.test.jsx | 2 +- .../src/templates/layouts/main-layout.jsx | 2 +- .../templates/layouts/main-layout.test.jsx | 6 +- .../templates/today-button/today-button.jsx | 4 +- .../today-button/today-button.test.jsx | 2 +- .../src/templates/toolbar/flexible-space.jsx | 2 +- .../templates/toolbar/flexible-space.test.jsx | 2 +- .../src/templates/toolbar/toolbar.jsx | 4 +- .../src/templates/toolbar/toolbar.test.jsx | 2 +- .../src/templates/utils.js | 14 +-- .../src/templates/view-switcher/switcher.jsx | 2 +- .../templates/view-switcher/switcher.test.jsx | 2 +- .../common/day-scale/day-scale-empty-cell.jsx | 2 +- .../day-scale/day-scale-empty-cell.test.jsx | 2 +- .../views/common/day-scale/layout.test.jsx | 2 +- .../src/templates/views/common/row.jsx | 2 +- .../src/templates/views/common/table.jsx | 6 +- .../src/templates/views/common/table.test.jsx | 6 +- .../views/horizontal/day-scale/cell.jsx | 4 +- .../views/horizontal/day-scale/cell.test.jsx | 2 +- .../views/horizontal/time-table/cell.jsx | 12 +- .../views/horizontal/time-table/cell.test.jsx | 2 +- .../horizontal/time-table/layout.test.jsx | 2 +- .../views/vertical/day-scale/cell.jsx | 4 +- .../views/vertical/day-scale/cell.test.jsx | 2 +- .../views/vertical/time-scale/label.jsx | 6 +- .../views/vertical/time-scale/label.test.jsx | 2 +- .../views/vertical/time-scale/layout.jsx | 12 +- .../views/vertical/time-scale/layout.test.jsx | 6 +- .../views/vertical/time-scale/tick-cell.jsx | 4 +- .../vertical/time-scale/tick-cell.test.jsx | 2 +- .../vertical/time-scale/ticks-layout.jsx | 6 +- .../vertical/time-scale/ticks-layout.test.jsx | 2 +- .../views/vertical/time-table/cell.jsx | 14 +-- .../views/vertical/time-table/cell.test.jsx | 6 +- .../views/vertical/time-table/layout.test.jsx | 2 +- .../src/types/resources.types.ts | 3 +- renovate.json | 4 +- yarn.lock | 117 +++++++++++++----- 373 files changed, 1053 insertions(+), 996 deletions(-) diff --git a/packages/dx-demo-shell/.eslintrc.json b/packages/dx-demo-shell/.eslintrc.json index 333c071073..b6ec4c6f3b 100644 --- a/packages/dx-demo-shell/.eslintrc.json +++ b/packages/dx-demo-shell/.eslintrc.json @@ -5,6 +5,6 @@ }, "rules": { "filenames/match-regex": [2, "^[a-z-\\.]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] } } diff --git a/packages/dx-react-chart-demos/.eslintrc.json b/packages/dx-react-chart-demos/.eslintrc.json index 754a01c993..a04898d968 100644 --- a/packages/dx-react-chart-demos/.eslintrc.json +++ b/packages/dx-react-chart-demos/.eslintrc.json @@ -9,6 +9,6 @@ }, "rules": { "filenames/match-regex": [2, "^[a-z-\\.\\d]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] } } diff --git a/packages/dx-react-chart-material-ui/.eslintrc.json b/packages/dx-react-chart-material-ui/.eslintrc.json index b1373c6517..17c809c596 100644 --- a/packages/dx-react-chart-material-ui/.eslintrc.json +++ b/packages/dx-react-chart-material-ui/.eslintrc.json @@ -6,7 +6,7 @@ "rules": { "jsx-a11y/no-static-element-interactions": "off", "filenames/match-regex": [2, "^[a-z-\\.]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] }, "env": { "jest/globals": true diff --git a/packages/dx-react-chart-material-ui/package.json b/packages/dx-react-chart-material-ui/package.json index f2c2804400..52444ecf12 100644 --- a/packages/dx-react-chart-material-ui/package.json +++ b/packages/dx-react-chart-material-ui/package.json @@ -91,7 +91,10 @@ "@devexpress/dx-chart-core": "2.7.6", "@devexpress/dx-react-chart": "2.7.6", "@devexpress/dx-react-core": "2.7.6", + "@emotion/react": ">=11.4.1", + "@emotion/styled": ">=11.3.0", "@mui/material": ">=5.0.0", + "@mui/styles": ">=5.0.0", "@mui/icons-material": ">=5.0.0", "react": ">=17.0.2" } diff --git a/packages/dx-react-common/.eslintrc.json b/packages/dx-react-common/.eslintrc.json index 868363dd12..4fdc2c4a6f 100644 --- a/packages/dx-react-common/.eslintrc.json +++ b/packages/dx-react-common/.eslintrc.json @@ -9,6 +9,6 @@ }, "rules": { "filenames/match-regex": [2, "^[a-z-\\.\\d]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] } } diff --git a/packages/dx-react-grid-demos/.eslintrc.json b/packages/dx-react-grid-demos/.eslintrc.json index 754a01c993..a04898d968 100644 --- a/packages/dx-react-grid-demos/.eslintrc.json +++ b/packages/dx-react-grid-demos/.eslintrc.json @@ -9,6 +9,6 @@ }, "rules": { "filenames/match-regex": [2, "^[a-z-\\.\\d]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] } } diff --git a/packages/dx-react-grid-demos/package.json b/packages/dx-react-grid-demos/package.json index dc28dad512..47041e23bf 100644 --- a/packages/dx-react-grid-demos/package.json +++ b/packages/dx-react-grid-demos/package.json @@ -42,7 +42,8 @@ "@emotion/styled": "^11.3.0", "@mui/material": "^5.0.0", "@mui/icons-material": "^5.0.0", - "@material-ui/pickers": "^3.3.10", + "@mui/styles": "^5.0.0", + "@mui/lab": "^5.0.0-alpha.50", "@types/react": "^17.0.27", "@types/react-dom": "^17.0.9", "clsx": "^1.1.1", diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-band-columns/material-ui/customization.partial.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-band-columns/material-ui/customization.partial.jsx index 409c4ea4da..8dafd0e3f7 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-band-columns/material-ui/customization.partial.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-band-columns/material-ui/customization.partial.jsx @@ -1,8 +1,8 @@ // BLOCK:imports -import { withStyles } from '@material-ui/core/styles'; -import Equalizer from '@material-ui/icons/Equalizer'; -import People from '@material-ui/icons/People'; -import PieChart from '@material-ui/icons/PieChart'; +import withStyles from '@mui/styles/withStyles'; +import Equalizer from '@mui/icons-material/Equalizer'; +import People from '@mui/icons-material/People'; +import PieChart from '@mui/icons-material/PieChart'; // BLOCK:imports // BLOCK:body diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-header-content-template.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-header-content-template.jsx index e5edcb7a44..660bb6d2c6 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-header-content-template.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-header-content-template.jsx @@ -1,13 +1,13 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; -import IconButton from '@material-ui/core/IconButton'; -import VisibilityOff from '@material-ui/icons/VisibilityOff'; +import Paper from '@mui/material/Paper'; +import IconButton from '@mui/material/IconButton'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; import { Grid, Table, TableHeaderRow, } from '@devexpress/dx-react-grid-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { generateRows, globalSalesValues, @@ -32,7 +32,7 @@ const TableHeaderContentBase = ({ className={classes.button} // eslint-disable-next-line no-alert onClick={() => alert('Custom action')} - > + size="large"> ) : null} diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-template.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-template.jsx index c26b888f34..da3e4b7aa1 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-template.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-basic/material-ui/table-template.jsx @@ -1,12 +1,12 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Grid, Table, TableHeaderRow, } from '@devexpress/dx-react-grid-material-ui'; -import { fade } from '@material-ui/core/styles/colorManipulator'; -import { withStyles } from '@material-ui/core/styles'; +import { alpha } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import { generateRows, globalSalesValues, @@ -15,7 +15,7 @@ import { const styles = theme => ({ tableStriped: { '& tbody tr:nth-of-type(odd)': { - backgroundColor: fade(theme.palette.primary.main, 0.15), + backgroundColor: alpha(theme.palette.primary.main, 0.15), }, }, }); diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/material-ui/resizing-mode.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/material-ui/resizing-mode.jsx index bd8f81e26b..17ec712627 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/material-ui/resizing-mode.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/material-ui/resizing-mode.jsx @@ -1,12 +1,12 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; -import { withStyles } from '@material-ui/core/styles'; -import OutlinedInput from '@material-ui/core/OutlinedInput'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; -import GridMUI from '@material-ui/core/Grid'; -import Button from '@material-ui/core/Button'; +import Paper from '@mui/material/Paper'; +import withStyles from '@mui/styles/withStyles'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; +import GridMUI from '@mui/material/Grid'; +import Button from '@mui/material/Button'; import { Grid, Table, diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/editors.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/editors.jsx index 4f446d61c3..05d26bcdec 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/editors.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/editors.jsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; -import Chip from '@material-ui/core/Chip'; -import Input from '@material-ui/core/Input'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; +import Paper from '@mui/material/Paper'; +import Chip from '@mui/material/Chip'; +import Input from '@mui/material/Input'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import { DataTypeProvider, EditingState, diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/tooltip.partial.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/tooltip.partial.jsx index 3735c6d5d5..a635af9430 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/tooltip.partial.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-data-types/material-ui/tooltip.partial.jsx @@ -1,6 +1,6 @@ // BLOCK:imports import * as React from 'react'; -import Tooltip from '@material-ui/core/Tooltip'; +import Tooltip from '@mui/material/Tooltip'; // BLOCK:imports // BLOCK:body diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/detail-row-editing.partial.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/detail-row-editing.partial.jsx index c2677ab709..9d06a40a91 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/detail-row-editing.partial.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/detail-row-editing.partial.jsx @@ -1,23 +1,21 @@ // BLOCK:imports import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; -import MuiGrid from '@material-ui/core/Grid'; -import TextField from '@material-ui/core/TextField'; -import FormGroup from '@material-ui/core/FormGroup'; -import Edit from '@material-ui/icons/Edit'; -import Cancel from '@material-ui/icons/Close'; -import IconButton from '@material-ui/core/IconButton'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import InputLabel from '@material-ui/core/InputLabel'; -import FormControl from '@material-ui/core/FormControl'; -import { - MuiPickersUtilsProvider, - KeyboardDatePicker, -} from '@material-ui/pickers'; -import MomentUtils from '@date-io/moment'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; +import Button from '@mui/material/Button'; +import MuiGrid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; +import FormGroup from '@mui/material/FormGroup'; +import Edit from '@mui/icons-material/Edit'; +import Cancel from '@mui/icons-material/Close'; +import IconButton from '@mui/material/IconButton'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import DatePicker from '@mui/lab/DatePicker'; +import LocalizationProvider from '@mui/lab/LocalizationProvider'; +import AdapterMoment from '@mui/lab/AdapterMoment'; // BLOCK:imports @@ -79,17 +77,16 @@ const DetailContent = ({ row, ...rest }) => { value={row.Position} onChange={processValueChange} /> - - + } value={row.BirthDate} - onChange={(_, value) => processValueChange({ + onChange={(value) => processValueChange({ target: { name: 'BirthDate', value: value.toDate() }, })} - format="MM/DD/YYYY" + inputFormat="MM/DD/YYYY" /> - + @@ -99,7 +96,7 @@ const DetailContent = ({ row, ...rest }) => { name="Notes" label="Notes" multiline - rowsMax={4} + maxRows={4} value={row.Notes} onChange={processValueChange} /> @@ -154,10 +151,7 @@ const ToggleCellBase = ({ style={style} {...restProps} > - + { expanded ? diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/inline-cell-editing.partial.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/inline-cell-editing.partial.jsx index 575db3668a..d14f3e404a 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/inline-cell-editing.partial.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/inline-cell-editing.partial.jsx @@ -1,12 +1,12 @@ // BLOCK:imports -import OutlinedInput from '@material-ui/core/OutlinedInput'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; -import GridMUI from '@material-ui/core/Grid'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import { withStyles } from '@material-ui/core/styles'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; +import GridMUI from '@mui/material/Grid'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import withStyles from '@mui/styles/withStyles'; // BLOCK:imports // BLOCK:body diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/popup-editing.partial.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/popup-editing.partial.jsx index 0d8cf28b78..61b6a2421e 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/popup-editing.partial.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-editing/material-ui/popup-editing.partial.jsx @@ -1,17 +1,15 @@ // BLOCK:imports -import TextField from '@material-ui/core/TextField'; -import FormGroup from '@material-ui/core/FormGroup'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import MuiGrid from '@material-ui/core/Grid'; -import { - MuiPickersUtilsProvider, - KeyboardDatePicker, -} from '@material-ui/pickers'; -import MomentUtils from '@date-io/moment'; +import TextField from '@mui/material/TextField'; +import FormGroup from '@mui/material/FormGroup'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import MuiGrid from '@mui/material/Grid'; +import DatePicker from '@mui/lab/DatePicker'; +import LocalizationProvider from '@mui/lab/LocalizationProvider'; +import AdapterMoment from '@mui/lab/AdapterMoment'; // BLOCK:imports // BLOCK:dialog @@ -60,17 +58,16 @@ const Popup = ({ value={row.lastName || ''} onChange={onChange} /> - - onChange({ - target: { name: 'birthDate', value }, + + } + value={row.BirthDate} + onChange={(value) => onChange({ + target: { name: 'BirthDate', value }, })} - format="DD/MM/YYYY" + inputFormat="DD/MM/YYYY" /> - + ({ diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-featured-data-editing/material-ui/demo.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-featured-data-editing/material-ui/demo.jsx index 54ac56ab89..b840cda916 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-featured-data-editing/material-ui/demo.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-featured-data-editing/material-ui/demo.jsx @@ -9,19 +9,19 @@ import { PagingPanel, DragDropProvider, TableColumnReordering, TableFixedColumns, TableSummaryRow, } from '@devexpress/dx-react-grid-material-ui'; -import Paper from '@material-ui/core/Paper'; -import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; -import Input from '@material-ui/core/Input'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import TableCell from '@material-ui/core/TableCell'; +import Paper from '@mui/material/Paper'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import Input from '@mui/material/Input'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import TableCell from '@mui/material/TableCell'; -import DeleteIcon from '@material-ui/icons/Delete'; -import EditIcon from '@material-ui/icons/Edit'; -import SaveIcon from '@material-ui/icons/Save'; -import CancelIcon from '@material-ui/icons/Cancel'; -import { withStyles } from '@material-ui/core/styles'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import SaveIcon from '@mui/icons-material/Save'; +import CancelIcon from '@mui/icons-material/Cancel'; +import withStyles from '@mui/styles/withStyles'; import { ProgressBarCell } from '../../../theme-sources/material-ui/components/progress-bar-cell'; import { HighlightedCell } from '../../../theme-sources/material-ui/components/highlighted-cell'; @@ -61,7 +61,7 @@ const AddButton = ({ onExecute }) => ( ); const EditButton = ({ onExecute }) => ( - + ); @@ -75,19 +75,19 @@ const DeleteButton = ({ onExecute }) => ( } }} title="Delete row" - > + size="large"> ); const CommitButton = ({ onExecute }) => ( - + ); const CancelButton = ({ onExecute }) => ( - + ); diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-featured-integrated-data-shaping/material-ui/demo.tsx b/packages/dx-react-grid-demos/src/demo-sources/grid-featured-integrated-data-shaping/material-ui/demo.tsx index 9f3671a868..85a9de8bfb 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-featured-integrated-data-shaping/material-ui/demo.tsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-featured-integrated-data-shaping/material-ui/demo.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import Input from '@material-ui/core/Input'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import Paper from '@mui/material/Paper'; +import Input from '@mui/material/Input'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; import { Column, FilteringState, GroupingState, diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-featured-redux-integration/material-ui/demo.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-featured-redux-integration/material-ui/demo.jsx index 1b9cbd641c..de6d2402b2 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-featured-redux-integration/material-ui/demo.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-featured-redux-integration/material-ui/demo.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { createStore } from 'redux'; import { connect, Provider } from 'react-redux'; import { @@ -11,7 +11,7 @@ import { TableFilterRow, TableSelection, TableGroupRow, TableRowDetail, GroupingPanel, PagingPanel, DragDropProvider, TableColumnReordering, TableColumnResizing, Toolbar, } from '@devexpress/dx-react-grid-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { generateRows, diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/advanced-filter-row.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/advanced-filter-row.jsx index 587bc6cd84..ee1bcf5d25 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/advanced-filter-row.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/advanced-filter-row.jsx @@ -4,10 +4,10 @@ import { FilteringState, IntegratedFiltering, DataTypeProvider } from '@devexpre import { Grid, Table, TableHeaderRow, TableFilterRow, } from '@devexpress/dx-react-grid-material-ui'; -import Paper from '@material-ui/core/Paper'; -import Input from '@material-ui/core/Input'; -import { withStyles } from '@material-ui/core/styles'; -import DateRange from '@material-ui/icons/DateRange'; +import Paper from '@mui/material/Paper'; +import Input from '@mui/material/Input'; +import withStyles from '@mui/styles/withStyles'; +import DateRange from '@mui/icons-material/DateRange'; import { generateRows, globalSalesValues } from '../../../demo-data/generator'; diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/custom-filter-row.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/custom-filter-row.jsx index 28d051552b..8991060696 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/custom-filter-row.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-filtering/material-ui/custom-filter-row.jsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; -import Input from '@material-ui/core/Input'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import Paper from '@mui/material/Paper'; +import Input from '@mui/material/Input'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; import { FilteringState, IntegratedFiltering, diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-sorting/material-ui/custom-sort-label.jsx b/packages/dx-react-grid-demos/src/demo-sources/grid-sorting/material-ui/custom-sort-label.jsx index 3b136c485b..5904df16a3 100644 --- a/packages/dx-react-grid-demos/src/demo-sources/grid-sorting/material-ui/custom-sort-label.jsx +++ b/packages/dx-react-grid-demos/src/demo-sources/grid-sorting/material-ui/custom-sort-label.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { SortingState, IntegratedSorting, @@ -10,9 +10,9 @@ import { TableHeaderRow, } from '@devexpress/dx-react-grid-material-ui'; -import Button from '@material-ui/core/Button'; -import ArrowDownward from '@material-ui/icons/ArrowDownward'; -import ArrowUpward from '@material-ui/icons/ArrowUpward'; +import Button from '@mui/material/Button'; +import ArrowDownward from '@mui/icons-material/ArrowDownward'; +import ArrowUpward from '@mui/icons-material/ArrowUpward'; import { generateRows } from '../../../demo-data/generator'; diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/currency-type-provider.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/currency-type-provider.jsx index 7b702afd3e..5c86095a10 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/currency-type-provider.jsx +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/currency-type-provider.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Input from '@material-ui/core/Input'; -import { withStyles } from '@material-ui/core/styles'; +import Input from '@mui/material/Input'; +import withStyles from '@mui/styles/withStyles'; import { DataTypeProvider } from '@devexpress/dx-react-grid'; const styles = { diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/highlighted-cell.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/highlighted-cell.jsx index 9818055729..ead3548e92 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/highlighted-cell.jsx +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/highlighted-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const getColor = (amount) => { if (amount < 3000) { diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/loading.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/loading.jsx index 5857bb96de..c11f701723 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/loading.jsx +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/loading.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import CircularProgress from '@mui/material/CircularProgress'; import './loading.css'; diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/percent-type-provider.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/percent-type-provider.jsx index cbe6c6f306..f771ef704e 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/percent-type-provider.jsx +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/percent-type-provider.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Input from '@material-ui/core/Input'; -import { withStyles } from '@material-ui/core/styles'; +import Input from '@mui/material/Input'; +import withStyles from '@mui/styles/withStyles'; import { DataTypeProvider } from '@devexpress/dx-react-grid'; const styles = { diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx index e70c1225dd..cac5a95f87 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ progressBarCell: { diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-container.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-container.jsx index 285845ada3..b5a751381d 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-container.jsx +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-container.jsx @@ -1,32 +1,34 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; -import { blue } from '@material-ui/core/colors'; +import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from '@mui/material/styles'; +import { blue } from '@mui/material/colors'; -const lightTheme = createMuiTheme({ +const lightTheme = createTheme(adaptV4Theme({ palette: { - type: 'light', + mode: 'light', primary: blue, }, typography: { useNextVariants: true, }, -}); +})); -const darkTheme = createMuiTheme({ +const darkTheme = createTheme(adaptV4Theme({ palette: { - type: 'dark', + mode: 'dark', primary: blue, }, typography: { useNextVariants: true, }, -}); +})); const DemoContainer = ({ theme, children }) => ( - - {children} - + + + {children} + + ); DemoContainer.propTypes = { diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-source-data.json b/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-source-data.json index adfdd49b8b..4276120b5a 100644 --- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-source-data.json +++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/demo-source-data.json @@ -1,5 +1,5 @@ { - "additionalImports": "\nimport Paper from '@material-ui/core/Paper';", + "additionalImports": "\nimport Paper from '@mui/material/Paper';", "wrapperTag": "Paper", - "dependencies": ["@material-ui/core", "@material-ui/icons"] + "dependencies": ["@mui/material", "@mui/icons-material"] } diff --git a/packages/dx-react-grid-material-ui/.eslintrc.json b/packages/dx-react-grid-material-ui/.eslintrc.json index b1373c6517..17c809c596 100644 --- a/packages/dx-react-grid-material-ui/.eslintrc.json +++ b/packages/dx-react-grid-material-ui/.eslintrc.json @@ -6,7 +6,7 @@ "rules": { "jsx-a11y/no-static-element-interactions": "off", "filenames/match-regex": [2, "^[a-z-\\.]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] }, "env": { "jest/globals": true diff --git a/packages/dx-react-grid-material-ui/package.json b/packages/dx-react-grid-material-ui/package.json index f1ba0db665..a344a09614 100644 --- a/packages/dx-react-grid-material-ui/package.json +++ b/packages/dx-react-grid-material-ui/package.json @@ -58,7 +58,9 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/material": "^5.0.0", + "@mui/styles": "^5.0.1", "@mui/icons-material": "^5.0.0", + "@mui/lab": "^5.0.0-alpha.50", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", @@ -94,6 +96,8 @@ "@devexpress/dx-react-grid": "2.7.6", "@mui/material": ">=5.0.0", "@mui/icons-material": ">=5.0.0", + "@mui/styles": ">=5.0.0", + "@mui/lab": "^5.0.0-alpha.50", "react": ">=17.0.2" } } diff --git a/packages/dx-react-grid-material-ui/src/plugins/table.jsx b/packages/dx-react-grid-material-ui/src/plugins/table.jsx index 4e24cfc038..1e4ae98f7d 100644 --- a/packages/dx-react-grid-material-ui/src/plugins/table.jsx +++ b/packages/dx-react-grid-material-ui/src/plugins/table.jsx @@ -1,8 +1,8 @@ import { withComponents } from '@devexpress/dx-react-core'; import { Table as TableBase } from '@devexpress/dx-react-grid'; -import TableBody from '@material-ui/core/TableBody'; -import TableHead from '@material-ui/core/TableHead'; -import TableFooter from '@material-ui/core/TableFooter'; +import TableBody from '@mui/material/TableBody'; +import TableHead from '@mui/material/TableHead'; +import TableFooter from '@mui/material/TableFooter'; import { Table as TableComponent } from '../templates/table'; import { TableRow as Row } from '../templates/table-row'; import { TableLayout as Layout } from '../templates/table-layout'; diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/container.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/container.jsx index 01faac1ee5..800b929245 100644 --- a/packages/dx-react-grid-material-ui/src/templates/column-chooser/container.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/column-chooser/container.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import List from '@material-ui/core/List'; +import List from '@mui/material/List'; export const Container = ({ children, ...restProps }) => ( ({ checkbox: { diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.test.jsx index eaa20bcc89..ee6b32898e 100644 --- a/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Checkbox from '@material-ui/core/Checkbox'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Checkbox from '@mui/material/Checkbox'; import { mount } from 'enzyme'; import { Item } from './item'; diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.jsx index d8f04a24aa..ed651e1623 100644 --- a/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Popover from '@material-ui/core/Popover'; +import Popover from '@mui/material/Popover'; export const Overlay = ({ visible, onHide, children, target, ...restProps diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.test.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.test.jsx index ac3420abf2..d3e4b34d5b 100644 --- a/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/column-chooser/overlay.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import Popover from '@material-ui/core/Popover'; +import Popover from '@mui/material/Popover'; import { Overlay } from './overlay'; describe('Overlay', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.jsx index 708bdf395c..ef71246ff7 100644 --- a/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import VisibilityOff from '@material-ui/icons/VisibilityOff'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; export const ToggleButton = ({ onToggle, getMessage, @@ -14,11 +14,7 @@ export const ToggleButton = ({ placement="bottom" enterDelay={300} > - + diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.test.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.test.jsx index c40b4e29a7..aaffbcaaec 100644 --- a/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/column-chooser/toggle-button.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import Tooltip from '@material-ui/core/Tooltip'; -import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import IconButton from '@mui/material/IconButton'; import { ToggleButton } from './toggle-button'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx b/packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx index b60e88c26f..72698db290 100644 --- a/packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Chip from '@material-ui/core/Chip'; -import { withStyles } from '@material-ui/core/styles'; +import Chip from '@mui/material/Chip'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ container: { diff --git a/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx b/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx index 3bccc83f6a..621656e1f2 100644 --- a/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Container, Column } from './drag-drop'; describe('DragDrop', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/empty-message.jsx b/packages/dx-react-grid-material-ui/src/templates/empty-message.jsx index 41891d521f..89ef0c1501 100644 --- a/packages/dx-react-grid-material-ui/src/templates/empty-message.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/empty-message.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Toolbar from '@material-ui/core/Toolbar'; -import { withStyles } from '@material-ui/core/styles'; +import Toolbar from '@mui/material/Toolbar'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ emptyMessage: { diff --git a/packages/dx-react-grid-material-ui/src/templates/empty-message.test.jsx b/packages/dx-react-grid-material-ui/src/templates/empty-message.test.jsx index bbbd1c90cc..deba612aeb 100644 --- a/packages/dx-react-grid-material-ui/src/templates/empty-message.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/empty-message.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow } from '@mui/material/test-utils'; import { EmptyMessage } from './empty-message'; describe('EmptyMessage', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.jsx b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.jsx index fcaaf46821..5cdb40d1f2 100644 --- a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import MenuItemMUI from '@material-ui/core/MenuItem'; +import MenuItemMUI from '@mui/material/MenuItem'; export const MenuItem = React.forwardRef(({ text, onClick, ...restProps diff --git a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.test.jsx index 84e613abeb..c9663e3fbd 100644 --- a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu-item.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import MenuItemMUI from '@material-ui/core/MenuItem'; +import MenuItemMUI from '@mui/material/MenuItem'; import { MenuItem } from './menu-item'; describe('ExportMenuItem', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.jsx b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.jsx index 6158a30a23..76bbf7b074 100644 --- a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import MenuMUI from '@material-ui/core/Menu'; +import MenuMUI from '@mui/material/Menu'; export const Menu = ({ visible, target, onHide, children, ...restProps diff --git a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.test.jsx b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.test.jsx index 34720d616b..51658d1cae 100644 --- a/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/export-panel/menu.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import MenuMUI from '@material-ui/core/Menu'; +import MenuMUI from '@mui/material/Menu'; import { Menu } from './menu'; describe('ExportMenu', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.jsx b/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.jsx index c8a3b512f6..2737a8447f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Save from '@material-ui/icons/Save'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import Save from '@mui/icons-material/Save'; export const ToggleButton = ({ onToggle, getMessage, buttonRef, @@ -13,11 +13,7 @@ export const ToggleButton = ({ placement="bottom" enterDelay={300} > - + diff --git a/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.test.jsx b/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.test.jsx index 6e6bdeaab8..869905dc2c 100644 --- a/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/export-panel/toggle-button.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import Tooltip from '@material-ui/core/Tooltip'; -import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import IconButton from '@mui/material/IconButton'; import { ToggleButton } from './toggle-button'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.jsx index c57005481a..4e04cb994a 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Input from '@material-ui/core/Input'; -import { withStyles } from '@material-ui/core/styles'; +import Input from '@mui/material/Input'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ input: { diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.test.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.test.jsx index 558347a155..46356d4141 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/editor.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; -import Input from '@material-ui/core/Input'; +import { createShallow } from '@mui/material/test-utils'; +import Input from '@mui/material/Input'; import { Editor } from './editor'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.jsx index 8f79edd399..784cab1478 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.jsx @@ -1,10 +1,10 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import { withStyles } from '@material-ui/core/styles'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import withStyles from '@mui/styles/withStyles'; const styles = ({ spacing }) => ({ icon: { diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.test.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.test.jsx index 15cafe6617..964c4f8a68 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import Menu from '@material-ui/core/Menu'; +import { createShallow, getClasses } from '@mui/material/test-utils'; +import Menu from '@mui/material/Menu'; import { FilterSelector } from './filter-selector'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector/toggle-button.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector/toggle-button.jsx index 0d4cdb3bec..61a40ae7e0 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector/toggle-button.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector/toggle-button.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import IconButton from '@material-ui/core/IconButton'; +import IconButton from '@mui/material/IconButton'; export const ToggleButton = ({ buttonRef, onToggle, disabled, children, ...restProps @@ -10,7 +10,7 @@ export const ToggleButton = ({ onClick={onToggle} disabled={disabled} {...restProps} - > + size="large"> {children} ); diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.jsx index 981fe3f323..08cdeed617 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import SearchIcon from '@material-ui/icons/Search'; +import SvgIcon from '@mui/material/SvgIcon'; +import SearchIcon from '@mui/icons-material/Search'; const AVAILABLE_PATHS = { contains: 'M6.094 19.563l-2.031 0.281c-0.646 0.094-1.13 0.266-1.453 0.516-0.302 0.24-0.453 0.646-0.453 1.219 0 0.438 0.138 0.799 0.414 1.086s0.664 0.419 1.164 0.398c0.708 0 1.281-0.24 1.719-0.719 0.427-0.49 0.641-1.125 0.641-1.906v-0.875zM8.234 24.641h-2.172v-1.641c-0.677 1.24-1.661 1.859-2.953 1.859-0.927 0-1.682-0.276-2.266-0.828-0.552-0.552-0.828-1.292-0.828-2.219 0-1.927 1.068-3.052 3.203-3.375l2.875-0.438c0-1.469-0.656-2.203-1.969-2.203-1.177 0-2.224 0.427-3.141 1.281v-2.078c1.010-0.656 2.198-0.984 3.563-0.984 2.458 0 3.687 1.302 3.687 3.906v6.719zM14.734 16.797c0.521-0.583 1.167-0.875 1.938-0.875 0.74 0 1.323 0.281 1.75 0.844 0.448 0.583 0.672 1.38 0.672 2.391 0 1.188-0.24 2.13-0.719 2.828-0.49 0.677-1.13 1.016-1.922 1.016-0.719 0-1.302-0.271-1.75-0.813-0.427-0.51-0.641-1.141-0.641-1.891v-1.266c-0.021-0.906 0.203-1.651 0.672-2.234zM16.969 24.859c1.375 0 2.443-0.521 3.203-1.562 0.781-1.042 1.172-2.427 1.172-4.156 0-1.542-0.354-2.771-1.063-3.688-0.688-0.958-1.651-1.438-2.891-1.438-1.427 0-2.531 0.693-3.313 2.078v-6.781h-2.156v15.328h2.172v-1.5c0.677 1.146 1.635 1.719 2.875 1.719zM22.266 6.125c0.135 0 0.245 0.063 0.328 0.188 0.104 0.073 0.156 0.182 0.156 0.328v22.953c0 0.125-0.052 0.24-0.156 0.344-0.083 0.115-0.193 0.172-0.328 0.172h-12.281c-0.146 0-0.266-0.057-0.359-0.172-0.115-0.115-0.172-0.229-0.172-0.344v-22.953c0-0.135 0.057-0.245 0.172-0.328 0.094-0.125 0.214-0.188 0.359-0.188h12.281zM31.531 24.141c-0.76 0.479-1.693 0.719-2.797 0.719-1.427 0-2.589-0.479-3.484-1.438-0.865-0.958-1.286-2.198-1.266-3.719 0-1.688 0.448-3.052 1.344-4.094 0.917-1.042 2.208-1.573 3.875-1.594 0.854 0 1.63 0.177 2.328 0.531v2.156c-0.677-0.531-1.391-0.792-2.141-0.781-0.938 0-1.714 0.339-2.328 1.016-0.594 0.677-0.891 1.552-0.891 2.625 0 1.042 0.297 1.88 0.891 2.516 0.521 0.615 1.25 0.922 2.188 0.922 0.813 0 1.573-0.297 2.281-0.891v2.031z', diff --git a/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.test.jsx b/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.test.jsx index 663a71816d..66369836a2 100644 --- a/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/filter-row/icon.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; -import SearchIcon from '@material-ui/icons/Search'; +import { createShallow } from '@mui/material/test-utils'; +import SearchIcon from '@mui/icons-material/Search'; import { Icon } from './icon'; describe('Icon', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-container.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-container.jsx index 93efee3c3e..8997b99cfb 100644 --- a/packages/dx-react-grid-material-ui/src/templates/group-panel-container.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-container.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ panel: { diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-container.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-container.test.jsx index 4f84bb5910..2450f78195 100644 --- a/packages/dx-react-grid-material-ui/src/templates/group-panel-container.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-container.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { GroupPanelContainer } from './group-panel-container'; describe('GroupPanelContainer', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.jsx index e71c7bb9fa..897899e221 100644 --- a/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ groupInfo: { diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.test.jsx index d6e3b5e444..8dcb7248a5 100644 --- a/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-empty-message.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { GroupPanelEmptyMessage } from './group-panel-empty-message'; describe('GroupPanelEmptyMessage', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx index 00045b8b65..4eac0f78cd 100644 --- a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Chip from '@material-ui/core/Chip'; -import { withStyles } from '@material-ui/core/styles'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import Chip from '@mui/material/Chip'; +import withStyles from '@mui/styles/withStyles'; const ENTER_KEY_CODE = 13; const SPACE_KEY_CODE = 32; diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx index 73d07e2a9e..fd98d0da1b 100644 --- a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import Chip from '@material-ui/core/Chip'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils'; +import Chip from '@mui/material/Chip'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import { createMount, createShallow, getClasses } from '@mui/material/test-utils'; import { GroupPanelItem } from './group-panel-item'; const ENTER_KEY_CODE = 13; diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.jsx index 8b4b89eadd..8b5b3afed9 100644 --- a/packages/dx-react-grid-material-ui/src/templates/layout.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/layout.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = { root: { diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.jsx index 71d927c5b5..507fec395f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Input from '@material-ui/core/Input'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { withStyles } from '@material-ui/core/styles'; +import Input from '@mui/material/Input'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import withStyles from '@mui/styles/withStyles'; import { IS_LEGACY_EDGE_MEDIA_QUERY } from '../constants'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.test.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.test.jsx index d7af179013..56b29c1ffc 100644 --- a/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/paging-panel/page-size-selector.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import Select from '@material-ui/core/Select'; -import Menu from '@material-ui/core/Menu'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import Select from '@mui/material/Select'; +import Menu from '@mui/material/Menu'; +import { createMount, getClasses } from '@mui/material/test-utils'; import { PageSizeSelector } from './page-size-selector'; describe('PageSizeSelector', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.jsx index d861daedde..1ccdd50002 100644 --- a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withKeyboardNavigation } from '@devexpress/dx-react-grid'; import { PageSizeSelector } from './page-size-selector'; import { Pagination } from './pagination'; diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.test.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.test.jsx index a715e35ba2..345ad7dc52 100644 --- a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pager.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { withKeyboardNavigation } from '@devexpress/dx-react-grid'; import { Pager } from './pager'; import { Pagination } from './pagination'; diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx index 3c7b911ff5..fb1bd4a2d5 100644 --- a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.jsx @@ -1,11 +1,11 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; -import { withStyles } from '@material-ui/core/styles'; -import ChevronLeft from '@material-ui/icons/ChevronLeft'; -import ChevronRight from '@material-ui/icons/ChevronRight'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import withStyles from '@mui/styles/withStyles'; +import ChevronLeft from '@mui/icons-material/ChevronLeft'; +import ChevronRight from '@mui/icons-material/ChevronRight'; import { firstRowOnPage, lastRowOnPage, calculateStartPage } from '@devexpress/dx-grid-core'; const styles = theme => ({ @@ -184,7 +184,7 @@ const PaginationBase = ({ disabled={currentPage === 0} onClick={() => (currentPage > 0) && onCurrentPageChange(currentPage - 1)} aria-label="Previous" - > + size="large"> {renderPageButtons(currentPage, totalPages, classes, onCurrentPageChange)} @@ -193,7 +193,7 @@ const PaginationBase = ({ disabled={currentPage === totalPages - 1 || totalCount === 0} onClick={() => currentPage < totalPages - 1 && onCurrentPageChange(currentPage + 1)} aria-label="Next" - > + size="large"> diff --git a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.test.jsx b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.test.jsx index 269e15f4e5..5b5cecacc2 100644 --- a/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/paging-panel/pagination.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; -import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; +import { createMount, getClasses } from '@mui/material/test-utils'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; import { setupConsole } from '@devexpress/dx-testing'; import { Pagination } from './pagination'; diff --git a/packages/dx-react-grid-material-ui/src/templates/search-panel-input.jsx b/packages/dx-react-grid-material-ui/src/templates/search-panel-input.jsx index fa6e586946..91c9179187 100644 --- a/packages/dx-react-grid-material-ui/src/templates/search-panel-input.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/search-panel-input.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Input from '@material-ui/core/Input'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import Search from '@material-ui/icons/Search'; +import withStyles from '@mui/styles/withStyles'; +import Input from '@mui/material/Input'; +import InputAdornment from '@mui/material/InputAdornment'; +import Search from '@mui/icons-material/Search'; const styles = theme => ({ root: { diff --git a/packages/dx-react-grid-material-ui/src/templates/search-panel-input.test.jsx b/packages/dx-react-grid-material-ui/src/templates/search-panel-input.test.jsx index dc02d20521..744b740d0b 100644 --- a/packages/dx-react-grid-material-ui/src/templates/search-panel-input.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/search-panel-input.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow } from '@mui/material/test-utils'; import { SearchPanelInput } from './search-panel-input'; const getMessage = jest.fn().mockReturnValue('placeholder'); diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.jsx index 69e9fff09e..3f02a01ab9 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { getBorder } from '../utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.test.jsx index e8a049cc5a..1a204c908d 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/banded-header-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { BandedHeaderCell } from './banded-header-cell'; describe('BandedHeaderCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.jsx index 4597327aab..e161294798 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; import { getBorder } from '../utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.test.jsx index 7c2910bd66..55a5bb4995 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Cell } from './cell'; describe('TableCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/invisible-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/invisible-cell.jsx index b25cabdcff..b668a7c041 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/invisible-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/invisible-cell.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = { emptyCell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.jsx index 34aa5a9ff8..8c6fe74dd1 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; -import TableRow from '@material-ui/core/TableRow'; +import withStyles from '@mui/styles/withStyles'; +import TableRow from '@mui/material/TableRow'; const styles = { row: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.test.jsx index 88868c31b1..14f33d3b3a 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-band-header/row.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Row } from './row'; describe('TableCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-cell.jsx index 8feb2dc516..415633fd57 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCellMUI from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCellMUI from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; import { getBorder } from './utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-cell.test.jsx index 403b70d879..647c702f24 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-cell.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import TableCellMUI from '@material-ui/core/TableCell'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import TableCellMUI from '@mui/material/TableCell'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableCell } from './table-cell'; describe('TableCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-container.jsx b/packages/dx-react-grid-material-ui/src/templates/table-container.jsx index ef100af322..f7c4d7f295 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-container.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-container.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = { root: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-container.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-container.test.jsx index 7fb1f728dd..5dc33f038d 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-container.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-container.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { TableContainer } from './table-container'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.jsx index 7a87c36e6e..de9762e75c 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ active: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.test.jsx index 1e600b1068..77227bcf03 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-detail-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableDetailCell } from './table-detail-cell'; describe('TableDetailCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx index e6ae4cdf2e..5b2de4a5c9 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx @@ -1,12 +1,12 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; -import ExpandMore from '@material-ui/icons/ExpandMore'; -import ExpandLess from '@material-ui/icons/ExpandLess'; -import IconButton from '@material-ui/core/IconButton'; +import ExpandMore from '@mui/icons-material/ExpandMore'; +import ExpandLess from '@mui/icons-material/ExpandLess'; +import IconButton from '@mui/material/IconButton'; const styles = theme => ({ toggleCell: { @@ -40,10 +40,7 @@ const TableDetailToggleCellBase = ({ ref={forwardedRef} {...restProps} > - + { expanded ? diff --git a/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.test.jsx index 770499b826..d3127a0b6f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.test.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import IconButton from '@material-ui/core/IconButton'; -import ExpandMore from '@material-ui/icons/ExpandMore'; -import ExpandLess from '@material-ui/icons/ExpandLess'; +import { createShallow, getClasses } from '@mui/material/test-utils'; +import IconButton from '@mui/material/IconButton'; +import ExpandMore from '@mui/icons-material/ExpandMore'; +import ExpandLess from '@mui/icons-material/ExpandLess'; import { TableDetailToggleCell } from './table-detail-toggle-cell'; describe('TableDetailToggleCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.jsx index 4779b693b1..9d62c77f01 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Input from '@material-ui/core/Input'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import Input from '@mui/material/Input'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.test.jsx index 729864a244..e32c17b976 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-edit-cell.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import Input from '@material-ui/core/Input'; -import TableCell from '@material-ui/core/TableCell'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import Input from '@mui/material/Input'; +import TableCell from '@mui/material/TableCell'; +import { createMount, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { EditCell } from './table-edit-cell'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.jsx index 6a22fa814b..7e8cdeef37 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Button from '@material-ui/core/Button'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ button: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.test.jsx index 0a946f3f54..1ef1a99e04 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-edit-command-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { CommandButton, EditCommandHeadingCell, diff --git a/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.jsx index b880d67da3..57fae69665 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = ({ spacing }) => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.test.jsx index 264a49e7db..862a89bc9f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableFilterCell } from './table-filter-cell'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.jsx index 27111aa0bf..8f9c42fbfc 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { getStickyCellStyle, getBorder } from './utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.test.jsx index 183218e211..765c31dedb 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-fixed-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { FixedCell } from './table-fixed-cell'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.jsx index 5e85d40725..31de55797b 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withKeyboardNavigation } from '@devexpress/dx-react-grid'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.test.jsx index 93297c73d0..b4086f9b72 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-focus-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { withKeyboardNavigation } from '@devexpress/dx-react-grid'; import { FocusCell } from './table-focus-cell'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-focus-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-focus-row.jsx index 43a765e5a7..7492f3dfff 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-focus-row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-focus-row.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import getSelectionColor from '../utils/get-selection-color'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-focus-row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-focus-row.test.jsx index 878d6ea14b..f89835caa1 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-focus-row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-focus-row.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { FocusRow } from './table-focus-row'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.jsx index db87e15414..9a0a6a2301 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.test.jsx index 5ad9783743..5d44ac063b 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/cell.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils'; -import TableCell from '@material-ui/core/TableCell'; +import { createMount, createShallow, getClasses } from '@mui/material/test-utils'; +import TableCell from '@mui/material/TableCell'; import { setupConsole } from '@devexpress/dx-testing'; import { Cell as TableGroupCell } from './cell'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.jsx index d6b6b02481..8b8ddf06ec 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { getStickyCellStyle } from '../utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.test.jsx index b0cdb2bda3..f9fe19ef6b 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/container.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Container } from './container'; describe('TableGroupCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/content.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/content.jsx index dbdfeac040..3300d75e35 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/content.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/content.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = () => ({ columnTitle: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/icon.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/icon.jsx index 8294601dca..5f8b9a8ae1 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/icon.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/icon.jsx @@ -1,10 +1,10 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import ExpandMore from '@material-ui/icons/ExpandMore'; -import IconButton from '@material-ui/core/IconButton'; +import ChevronRight from '@mui/icons-material/ChevronRight'; +import ExpandMore from '@mui/icons-material/ExpandMore'; +import IconButton from '@mui/material/IconButton'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ groupButton: { @@ -24,7 +24,7 @@ const IconBase = React.memo(({ + size="large"> { expanded ? diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.jsx index 2da4008bdc..2e884f0525 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; import { getStickyCellStyle, getBorder } from '../utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.test.jsx index cee379abd4..1f6693a07d 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/indent-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { IndentCell } from './indent-cell'; describe('TableGroupCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.jsx index ffd59e839a..11d7399c97 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ inlineSummary: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.test.jsx index b31a9c5ec0..39cc20a3b2 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/inline-summary.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import { createMount, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { InlineSummary } from './inline-summary'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.jsx index 9bf93e5dbb..9bbaae5c51 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { TableRow } from '../table-row'; const styles = () => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.test.jsx index fdbc7a2ba6..a34340fe94 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/row.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Row } from './row'; describe('TableGroupRow', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/summary-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/summary-cell.test.jsx index 1c0d95eaa9..57cc851b9f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-group-cell/summary-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-group-cell/summary-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow } from '@mui/material/test-utils'; import { SummaryCell } from './summary-cell'; describe('TableGroupRow', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx index b26c8b4868..f2343456b3 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import TableCell from '@material-ui/core/TableCell'; -import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils'; +import TableCell from '@mui/material/TableCell'; +import { createMount, createShallow, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { DragDropProvider, DragSource } from '@devexpress/dx-react-core'; import { TableHeaderCell } from './table-header-cell'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/cell-layout.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/cell-layout.jsx index 61e59e9956..61e8148205 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/cell-layout.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/cell-layout.jsx @@ -2,8 +2,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; import { ResizingControl } from './resizing-control'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.jsx index dba7cce20d..b0c75bf8d0 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; const styles = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.test.jsx index ff71f630b8..3d726035e4 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/content.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Content } from './content'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.jsx index 89f761dc28..f44021e5f8 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import List from '@material-ui/icons/List'; -import { withStyles } from '@material-ui/core/styles'; +import List from '@mui/icons-material/List'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ root: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.test.jsx index 9a47a4e300..3985228cc9 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/group-button.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { GroupButton } from './group-button'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx index 6db7afeda2..3960e7564a 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; import { Draggable } from '@devexpress/dx-react-core'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ resizeHandle: { @@ -26,10 +26,10 @@ const styles = theme => ({ transition: 'all linear 100ms', }, resizeHandleFirstLine: { - left: `${theme.spacing(1) - 1}px`, + left: `calc(${theme.spacing(1)} - 1px)`, }, resizeHandleSecondLine: { - left: `${theme.spacing(1) + 1}px`, + left: `calc(${theme.spacing(1)} + 1px)`, }, resizeHandleLineActive: { left: theme.spacing(1), diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.test.jsx index 45069ad3e2..f0294ba78d 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { Draggable } from '@devexpress/dx-react-core'; import { ResizingControl } from './resizing-control'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.jsx index 6d271e3a64..878fcec859 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Tooltip from '@material-ui/core/Tooltip'; -import { withStyles } from '@material-ui/core/styles'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import Tooltip from '@mui/material/Tooltip'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; const ENTER_KEY_CODE = 13; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.test.jsx index e0e0f349e6..33ad81806f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/sort-label.test.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Tooltip from '@material-ui/core/Tooltip'; +import { createShallow, createMount, getClasses } from '@mui/material/test-utils'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import Tooltip from '@mui/material/Tooltip'; import { SortLabel } from './sort-label'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.jsx index 57c405e9e7..da0bab5e54 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; const styles = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.test.jsx index ac393411a0..df7ec21b0c 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/title.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Title } from './title'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-invisible-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-invisible-row.jsx index 04745978a1..80fab5bba7 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-invisible-row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-invisible-row.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { TableRow } from './table-row'; const styles = () => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-listener-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-listener-cell.jsx index 4cd8d48a30..b83abb0877 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-listener-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-listener-cell.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; import { Sizer } from '@devexpress/dx-react-core'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { TableStubCell } from './table-stub-cell'; const styles = () => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.jsx index 228f5dbe14..825e103520 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.test.jsx index e2a185fd96..797842ec26 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-no-data-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableNoDataCell } from './table-no-data-cell'; describe('TableNoDataCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-row.jsx index 3c4bc1b1c0..18804ec957 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-row.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import TableRowMUI from '@material-ui/core/TableRow'; +import TableRowMUI from '@mui/material/TableRow'; export const TableRow = ({ children, diff --git a/packages/dx-react-grid-material-ui/src/templates/table-row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-row.test.jsx index 8ce7380f3c..d8906da87c 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-row.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow } from '@mui/material/test-utils'; import { TableRow } from './table-row'; describe('TableRow', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx index cdf8ca5554..463e07d790 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Checkbox from '@material-ui/core/Checkbox'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import Checkbox from '@mui/material/Checkbox'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx index 599f0a1e95..0261a1e513 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import Checkbox from '@material-ui/core/Checkbox'; -import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils'; +import Checkbox from '@mui/material/Checkbox'; +import { createMount, createShallow, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { TableSelectAllCell } from './table-select-all-cell'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx index f085ad56e3..c4326566eb 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Checkbox from '@material-ui/core/Checkbox'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import Checkbox from '@mui/material/Checkbox'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx index ca30e9f85d..7fb6e6ecbb 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import Checkbox from '@material-ui/core/Checkbox'; -import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils'; +import Checkbox from '@mui/material/Checkbox'; +import { createMount, createShallow, getClasses } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { TableSelectCell } from './table-select-cell'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx index 428e143898..a9a2dfbfa5 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableRow from '@material-ui/core/TableRow'; -import { withStyles } from '@material-ui/core/styles'; +import TableRow from '@mui/material/TableRow'; +import withStyles from '@mui/styles/withStyles'; import getSelectionColor from '../utils/get-selection-color'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx index 9bcf78f362..aebcabdc69 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import TableRowMUI from '@material-ui/core/TableRow'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import TableRowMUI from '@mui/material/TableRow'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableSelectRow } from './table-select-row'; const defaultProps = { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx index 96728a8d13..b04ad000fd 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; -import TableCell from '@material-ui/core/TableCell'; +import withStyles from '@mui/styles/withStyles'; +import TableCell from '@mui/material/TableCell'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx index 74167b36dc..ef8aec094f 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableSkeletonCell } from './table-skeleton-cell'; describe('TableSkeletonCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.jsx index 035a6dfe99..09ca61a117 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCell from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; import { getBorder } from './utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.test.jsx index 36167ffbc8..8b56dada36 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableStubCell } from './table-stub-cell'; describe('TableStubCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-stub-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-stub-row.jsx index f2fa1312b4..b8c6fdf7cc 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-stub-row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-stub-row.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import TableRowMUI from '@material-ui/core/TableRow'; +import TableRowMUI from '@mui/material/TableRow'; export const TableStubRow = ({ children, diff --git a/packages/dx-react-grid-material-ui/src/templates/table-stub-row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-stub-row.test.jsx index 815402aa13..860c0471cf 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-stub-row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-stub-row.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow } from '@mui/material/test-utils'; import { TableStubRow } from './table-stub-row'; describe('TableStubRow', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-summary-item.jsx b/packages/dx-react-grid-material-ui/src/templates/table-summary-item.jsx index 838f64dff0..8b7d601de6 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-summary-item.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-summary-item.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ item: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-summary-item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-summary-item.test.jsx index decda48bf3..50ff317044 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-summary-item.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-summary-item.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableSummaryItem } from './table-summary-item'; describe('TableSummaryItem', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.jsx index a678a92f98..6ea68a9c22 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCellMUI from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; +import TableCellMUI from '@mui/material/TableCell'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ cell: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.test.jsx index 868fa05474..cd53426dcd 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableTreeCell } from './table-tree-cell'; describe('TableTreeCell', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.jsx index bc52fa7b53..56c723f1a1 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import CheckboxMUI from '@material-ui/core/Checkbox'; -import { withStyles } from '@material-ui/core/styles'; +import CheckboxMUI from '@mui/material/Checkbox'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ checkbox: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.test.jsx index 56ecfdef4c..3b7b3a29d4 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import Checkbox from '@material-ui/core/Checkbox'; -import { createShallow } from '@material-ui/core/test-utils'; +import Checkbox from '@mui/material/Checkbox'; +import { createShallow } from '@mui/material/test-utils'; import { setupConsole } from '@devexpress/dx-testing'; import { TableTreeCheckbox } from './table-tree-checkbox'; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-content.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-content.jsx index 54c24ed517..01896e1608 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-content.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-content.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = () => ({ content: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-content.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-content.test.jsx index 60861d01f3..563bc2867c 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-content.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-content.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TableTreeContent } from './table-tree-content'; describe('TableTreeContent', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.jsx index 1d7556f4cc..7d2b205cc3 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.jsx @@ -1,11 +1,11 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import ExpandMore from '@material-ui/icons/ExpandMore'; -import IconButton from '@material-ui/core/IconButton'; +import ChevronRight from '@mui/icons-material/ChevronRight'; +import ExpandMore from '@mui/icons-material/ExpandMore'; +import IconButton from '@mui/material/IconButton'; const styles = theme => ({ button: { @@ -38,7 +38,7 @@ const TableTreeExpandButtonBase = ({ }} tabIndex={visible ? 0 : -1} {...restProps} - > + size="large"> {expanded ? : } diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.test.jsx index 53fa65bc8a..43f1baa0f7 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; -import IconButton from '@material-ui/core/IconButton'; +import { createShallow } from '@mui/material/test-utils'; +import IconButton from '@mui/material/IconButton'; import { TableTreeExpandButton } from './table-tree-expand-button'; describe('TableTreeExpandButton', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-indent.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-indent.jsx index 2283bd2a34..18132c55c3 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-tree-indent.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-tree-indent.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; const styles = theme => ({ indent: { diff --git a/packages/dx-react-grid-material-ui/src/templates/table.jsx b/packages/dx-react-grid-material-ui/src/templates/table.jsx index 3fb46230f4..57dee015ce 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableMUI from '@material-ui/core/Table'; -import { withStyles } from '@material-ui/core/styles'; +import TableMUI from '@mui/material/Table'; +import withStyles from '@mui/styles/withStyles'; import { getBorder } from './utils'; const styles = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/templates/table.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table.test.jsx index d7683678f0..8a278487fb 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Table } from './table'; describe('Table', () => { diff --git a/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.jsx b/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.jsx index f67ab0226a..922edf8f85 100644 --- a/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import ToolbarMUI from '@material-ui/core/Toolbar'; -import { withStyles } from '@material-ui/core/styles'; +import ToolbarMUI from '@mui/material/Toolbar'; +import withStyles from '@mui/styles/withStyles'; import { withKeyboardNavigation } from '@devexpress/dx-react-grid'; import { getBorder } from '../utils'; diff --git a/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.test.jsx b/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.test.jsx index 0ef7717c7a..5eb2b2cfe3 100644 --- a/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/toolbar/toolbar.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getClasses, createShallow } from '@material-ui/core/test-utils'; +import { getClasses, createShallow } from '@mui/material/test-utils'; import { withKeyboardNavigation } from '@devexpress/dx-react-grid'; import { Toolbar } from './toolbar'; diff --git a/packages/dx-react-grid-material-ui/src/templates/utils.jsx b/packages/dx-react-grid-material-ui/src/templates/utils.jsx index 75fd739d68..3f39529556 100644 --- a/packages/dx-react-grid-material-ui/src/templates/utils.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/utils.jsx @@ -1,9 +1,9 @@ -import { darken, fade, lighten } from '@material-ui/core/styles/colorManipulator'; +import { darken, alpha, lighten } from '@mui/material/styles'; export const getBorder = theme => (`1px solid ${ - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68) + theme.palette.mode === 'light' + ? lighten(alpha(theme.palette.divider, 1), 0.88) + : darken(alpha(theme.palette.divider, 1), 0.68) }`); export const getStickyCellStyle = theme => ({ diff --git a/packages/dx-react-grid-material-ui/src/utils/get-selection-color.jsx b/packages/dx-react-grid-material-ui/src/utils/get-selection-color.jsx index dce6e56d9a..68c0aa603c 100644 --- a/packages/dx-react-grid-material-ui/src/utils/get-selection-color.jsx +++ b/packages/dx-react-grid-material-ui/src/utils/get-selection-color.jsx @@ -1,7 +1,7 @@ -import { darken, fade, lighten } from '@material-ui/core/styles/colorManipulator'; +import { darken, alpha, lighten } from '@mui/material/styles'; export default theme => ( - theme.palette.type === 'light' - ? lighten(fade(theme.palette.action.selected, 1), 0.96) - : darken(fade(theme.palette.action.selected, 1), 0.68) + theme.palette.mode === 'light' + ? lighten(alpha(theme.palette.action.selected, 1), 0.96) + : darken(alpha(theme.palette.action.selected, 1), 0.68) ); diff --git a/packages/dx-react-scheduler-demos/.eslintrc.json b/packages/dx-react-scheduler-demos/.eslintrc.json index 754a01c993..a04898d968 100644 --- a/packages/dx-react-scheduler-demos/.eslintrc.json +++ b/packages/dx-react-scheduler-demos/.eslintrc.json @@ -9,6 +9,6 @@ }, "rules": { "filenames/match-regex": [2, "^[a-z-\\.\\d]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] } } diff --git a/packages/dx-react-scheduler-demos/package.json b/packages/dx-react-scheduler-demos/package.json index a9b8f8df39..16184be731 100644 --- a/packages/dx-react-scheduler-demos/package.json +++ b/packages/dx-react-scheduler-demos/package.json @@ -32,7 +32,7 @@ "@emotion/styled": "^11.3.0", "@mui/material": "^5.0.0", "@mui/icons-material": "^5.0.0", - "@material-ui/pickers": "^3.3.10", + "@mui/lab": "^5.0.0-alpha.50", "@types/react": "^17.0.27", "@types/react-dom": "^17.0.9", "clsx": "^1.0.4", @@ -90,7 +90,6 @@ "write-file-webpack-plugin": "^4.5.1" }, "peerDependencies": { - "@date-io/moment": "^1.3.11", - "@material-ui/pickers": "^3.2.6" + "@date-io/moment": "^1.3.11" } } diff --git a/packages/dx-react-scheduler-demos/src/demo-data/resources.js b/packages/dx-react-scheduler-demos/src/demo-data/resources.js index 5874bed11f..05fcaef363 100644 --- a/packages/dx-react-scheduler-demos/src/demo-data/resources.js +++ b/packages/dx-react-scheduler-demos/src/demo-data/resources.js @@ -1,6 +1,6 @@ import { pink, purple, teal, amber, deepOrange, -} from '@material-ui/core/colors'; +} from '@mui/material/colors'; export const appointments = [ { diff --git a/packages/dx-react-scheduler-demos/src/demo-data/tasks.js b/packages/dx-react-scheduler-demos/src/demo-data/tasks.js index 088f9a5e95..cc32cc4dbe 100644 --- a/packages/dx-react-scheduler-demos/src/demo-data/tasks.js +++ b/packages/dx-react-scheduler-demos/src/demo-data/tasks.js @@ -1,4 +1,4 @@ -import { green, deepOrange, lightBlue } from '@material-ui/core/colors'; +import { green, deepOrange, lightBlue } from '@mui/material/colors'; export const tasks = [ { diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx index 9d078fb078..a0340247f5 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/basic-setup.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/basic-setup.jsx index 96a1a8376a..898b511653 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/basic-setup.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/basic-setup.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx index b0d2a1ce93..a0cc0c6caf 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx @@ -1,39 +1,39 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, WeekView, Appointments, } from '@devexpress/dx-react-scheduler-material-ui'; -import { makeStyles } from '@material-ui/core/styles'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@mui/material/styles'; +import makeStyles from '@mui/styles/makeStyles'; import appointments from '../../../demo-data/today-appointments'; const useStyles = makeStyles(theme => ({ todayCell: { - backgroundColor: fade(theme.palette.primary.main, 0.1), + backgroundColor: alpha(theme.palette.primary.main, 0.1), '&:hover': { - backgroundColor: fade(theme.palette.primary.main, 0.14), + backgroundColor: alpha(theme.palette.primary.main, 0.14), }, '&:focus': { - backgroundColor: fade(theme.palette.primary.main, 0.16), + backgroundColor: alpha(theme.palette.primary.main, 0.16), }, }, weekendCell: { - backgroundColor: fade(theme.palette.action.disabledBackground, 0.04), + backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04), '&:hover': { - backgroundColor: fade(theme.palette.action.disabledBackground, 0.04), + backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04), }, '&:focus': { - backgroundColor: fade(theme.palette.action.disabledBackground, 0.04), + backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04), }, }, today: { - backgroundColor: fade(theme.palette.primary.main, 0.16), + backgroundColor: alpha(theme.palette.primary.main, 0.16), }, weekend: { - backgroundColor: fade(theme.palette.action.disabledBackground, 0.06), + backgroundColor: alpha(theme.palette.action.disabledBackground, 0.06), }, })); diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/day.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/day.jsx index b9e42d5101..c293fa5b20 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/day.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/day.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Scheduler, DayView, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/month.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/month.jsx index 7e94479afd..9562f6115e 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/month.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/month.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx index 7be7c24049..f0bbe25b12 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/week.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/week.jsx index 6aa94d266d..f35ab4e5bd 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/week.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/week.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Scheduler, WeekView, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/zero-duration.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/zero-duration.jsx index 64b9824572..8b00fc95c1 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/zero-duration.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/zero-duration.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/current-time-indicator.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/current-time-indicator.jsx index 1c8d2ed0a8..0f1ce92ba6 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/current-time-indicator.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/current-time-indicator.jsx @@ -8,14 +8,14 @@ import { CurrentTimeIndicator, EditRecurrenceMenu, } from '@devexpress/dx-react-scheduler-material-ui'; -import Paper from '@material-ui/core/Paper'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Grid from '@material-ui/core/Grid'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import { withStyles } from '@material-ui/core/styles'; +import Paper from '@mui/material/Paper'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import InputAdornment from '@mui/material/InputAdornment'; +import withStyles from '@mui/styles/withStyles'; import appointments from '../../../demo-data/today-appointments'; @@ -82,7 +82,7 @@ const UpdateIntervalBox = withStyles(styles, { name: 'UpdateIntervalSetter' })(( updateInterval, onValueChange, classes, // #FOLD_BLOCK }) => ( - + Update every: diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/customization.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/customization.jsx index a5de44bf8b..117f025a31 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/customization.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-current-time-indication/material-ui/customization.jsx @@ -5,10 +5,10 @@ import { WeekView, CurrentTimeIndicator, } from '@devexpress/dx-react-scheduler-material-ui'; -import Paper from '@material-ui/core/Paper'; -import { makeStyles } from '@material-ui/core/styles'; -import teal from '@material-ui/core/colors/teal'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import Paper from '@mui/material/Paper'; +import makeStyles from '@mui/styles/makeStyles'; +import teal from '@mui/material/colors/teal'; +import { alpha } from '@mui/material/styles'; import classNames from 'clsx'; import appointments from '../../../demo-data/today-appointments'; @@ -35,24 +35,24 @@ const useStyles = makeStyles(theme => ({ top: ({ top }) => top, }, shadedCell: { - backgroundColor: fade(theme.palette.primary.main, 0.08), + backgroundColor: alpha(theme.palette.primary.main, 0.08), '&:hover': { - backgroundColor: fade(theme.palette.primary.main, 0.12), + backgroundColor: alpha(theme.palette.primary.main, 0.12), }, '&:focus': { - backgroundColor: fade(theme.palette.primary.main, 0.20), + backgroundColor: alpha(theme.palette.primary.main, 0.20), outline: 0, }, }, shadedPart: { - backgroundColor: fade(theme.palette.primary.main, 0.08), + backgroundColor: alpha(theme.palette.primary.main, 0.08), position: 'absolute', height: ({ shadedHeight }) => shadedHeight, width: '100%', left: 0, top: 0, 'td:focus &': { - backgroundColor: fade(theme.palette.primary.main, 0.12), + backgroundColor: alpha(theme.palette.primary.main, 0.12), }, }, appointment: { diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/controlled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/controlled.jsx index fd6d1af984..99ae35978a 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/controlled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/controlled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/uncontrolled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/uncontrolled.jsx index 1a550cde0c..f837702ab4 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/uncontrolled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/uncontrolled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/controlled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/controlled.jsx index e29d7409d2..dc2fd3d3e0 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/controlled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/controlled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/copy-after-dragdrop.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/copy-after-dragdrop.jsx index af8f0bef5b..2c6bc10e7e 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/copy-after-dragdrop.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/copy-after-dragdrop.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unused-state */ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState, IntegratedEditing } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/delete-confirmation.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/delete-confirmation.jsx index 3a8c2a92e7..006708b5cf 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/delete-confirmation.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/delete-confirmation.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState, IntegratedEditing } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/drag-drop.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/drag-drop.jsx index d6d2a0b4a5..e1a0916a93 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/drag-drop.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/drag-drop.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/destructuring-assignment */ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/editing-features.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/editing-features.jsx index cb367731ad..bb33650765 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/editing-features.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/editing-features.jsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Typography from '@material-ui/core/FormControl'; -import { makeStyles } from '@material-ui/core/styles'; +import Paper from '@mui/material/Paper'; +import FormGroup from '@mui/material/FormGroup'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Typography from '@mui/material/FormControl'; +import makeStyles from '@mui/styles/makeStyles'; import { ViewState, EditingState, IntegratedEditing } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/form-customization.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/form-customization.jsx index c387315ec9..cd5411f556 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/form-customization.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/form-customization.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState, IntegratedEditing } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/uncontrolled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/uncontrolled.jsx index 59f6052767..521b2805c7 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/uncontrolled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/uncontrolled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState, IntegratedEditing } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx index 2bee9521b1..4547ba8efb 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx @@ -21,17 +21,19 @@ import { Resources, } from '@devexpress/dx-react-scheduler-material-ui'; import { connectProps } from '@devexpress/dx-react-core'; -import { withStyles, makeStyles, fade } from '@material-ui/core/styles'; -import PriorityHigh from '@material-ui/icons/PriorityHigh'; -import LowPriority from '@material-ui/icons/LowPriority'; -import Lens from '@material-ui/icons/Lens'; -import Event from '@material-ui/icons/Event'; -import AccessTime from '@material-ui/icons/AccessTime'; -import Paper from '@material-ui/core/Paper'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Grid from '@material-ui/core/Grid'; -import FormControl from '@material-ui/core/FormControl'; +import { alpha } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; +import makeStyles from '@mui/styles/makeStyles'; +import PriorityHigh from '@mui/icons-material/PriorityHigh'; +import LowPriority from '@mui/icons-material/LowPriority'; +import Lens from '@mui/icons-material/Lens'; +import Event from '@mui/icons-material/Event'; +import AccessTime from '@mui/icons-material/AccessTime'; +import Paper from '@mui/material/Paper'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Grid from '@mui/material/Grid'; +import FormControl from '@mui/material/FormControl'; import classNames from 'clsx'; import { priorities } from '../../../demo-data/tasks'; @@ -154,21 +156,21 @@ const groupingStyles = ({ spacing }) => ({ ...priorities.reduce((acc, priority) => ({ ...acc, [`cell${priority.text.replace(' ', '')}`]: { - backgroundColor: fade(priority.color[400], 0.1), + backgroundColor: alpha(priority.color[400], 0.1), '&:hover': { - backgroundColor: fade(priority.color[400], 0.15), + backgroundColor: alpha(priority.color[400], 0.15), }, '&:focus': { - backgroundColor: fade(priority.color[400], 0.2), + backgroundColor: alpha(priority.color[400], 0.2), }, }, [`headerCell${priority.text.replace(' ', '')}`]: { - backgroundColor: fade(priority.color[400], 0.1), + backgroundColor: alpha(priority.color[400], 0.1), '&:hover': { - backgroundColor: fade(priority.color[400], 0.1), + backgroundColor: alpha(priority.color[400], 0.1), }, '&:focus': { - backgroundColor: fade(priority.color[400], 0.1), + backgroundColor: alpha(priority.color[400], 0.1), }, }, }), {}), diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-editing/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-editing/material-ui/demo.jsx index 6fa7f1952d..7b3bb0111d 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-editing/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-editing/material-ui/demo.jsx @@ -1,7 +1,7 @@ /* eslint-disable max-classes-per-file */ /* eslint-disable react/no-unused-state */ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState } from '@devexpress/dx-react-scheduler'; import { Scheduler, @@ -17,24 +17,25 @@ import { AllDayPanel, } from '@devexpress/dx-react-scheduler-material-ui'; import { connectProps } from '@devexpress/dx-react-core'; -import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; -import MomentUtils from '@date-io/moment'; -import { withStyles } from '@material-ui/core/styles'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import Button from '@material-ui/core/Button'; -import Fab from '@material-ui/core/Fab'; -import IconButton from '@material-ui/core/IconButton'; -import AddIcon from '@material-ui/icons/Add'; -import TextField from '@material-ui/core/TextField'; -import LocationOn from '@material-ui/icons/LocationOn'; -import Notes from '@material-ui/icons/Notes'; -import Close from '@material-ui/icons/Close'; -import CalendarToday from '@material-ui/icons/CalendarToday'; -import Create from '@material-ui/icons/Create'; +import DateTimePicker from '@mui/lab/DateTimePicker'; +import LocalizationProvider from '@mui/lab/LocalizationProvider'; +import AdapterMoment from '@mui/lab/AdapterMoment'; +import withStyles from '@mui/styles/withStyles'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import Button from '@mui/material/Button'; +import Fab from '@mui/material/Fab'; +import IconButton from '@mui/material/IconButton'; +import AddIcon from '@mui/icons-material/Add'; +import TextField from '@mui/material/TextField'; +import LocationOn from '@mui/icons-material/LocationOn'; +import Notes from '@mui/icons-material/Notes'; +import Close from '@mui/icons-material/Close'; +import CalendarToday from '@mui/icons-material/CalendarToday'; +import Create from '@mui/icons-material/Create'; import { appointments } from '../../../demo-data/appointments'; @@ -121,9 +122,9 @@ class AppointmentFormContainerBasic extends React.PureComponent { ...this.getAppointmentData(), ...this.getAppointmentChanges(), }; - if (type === 'deleted') { + if(type === 'deleted') { commitChanges({ [type]: appointment.id }); - } else if (type === 'changed') { + } else if(type === 'changed') { commitChanges({ [type]: { [appointment.id]: appointment } }); } else { commitChanges({ [type]: appointment }); @@ -166,18 +167,21 @@ class AppointmentFormContainerBasic extends React.PureComponent { }); const pickerEditorProps = field => ({ + textFieldProps: { + variant: 'outlined', + }, className: classes.picker, // keyboard: true, - ampm: false, value: displayAppointmentData[field], onChange: date => this.changeAppointment({ field: [field], changes: date ? date.toDate() : new Date(displayAppointmentData[field]), }), - inputVariant: 'outlined', - format: 'DD/MM/YYYY HH:mm', + ampm: false, + inputFormat: 'DD/MM/YYYY HH:mm', onError: () => null, }); - + const startDatePickerProps = pickerEditorProps('startDate'); + const endDatePickerProps = pickerEditorProps('endDate'); const cancelChanges = () => { this.setState({ appointmentChanges: {}, @@ -195,10 +199,7 @@ class AppointmentFormContainerBasic extends React.PureComponent { >
- +
@@ -211,16 +212,16 @@ class AppointmentFormContainerBasic extends React.PureComponent {
- - + } + {...startDatePickerProps} /> - } + {...endDatePickerProps} /> - +
@@ -318,7 +319,7 @@ class Demo extends React.PureComponent { .filter(appointment => editingAppointment && appointment.id === editingAppointment.id)[0] || addedAppointment; const cancelAppointment = () => { - if (isNewAppointment) { + if(isNewAppointment) { this.setState({ editingAppointment: previousAppointment, isNewAppointment: false, @@ -348,7 +349,7 @@ class Demo extends React.PureComponent { onAddedAppointmentChange(addedAppointment) { this.setState({ addedAppointment }); const { editingAppointment } = this.state; - if (editingAppointment !== undefined) { + if(editingAppointment !== undefined) { this.setState({ previousAppointment: editingAppointment, }); @@ -385,15 +386,15 @@ class Demo extends React.PureComponent { commitChanges({ added, changed, deleted }) { this.setState((state) => { let { data } = state; - if (added) { + if(added) { const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0; data = [...data, { id: startingAddedId, ...added }]; } - if (changed) { + if(changed) { data = data.map(appointment => ( changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment)); } - if (deleted !== undefined) { + if(deleted !== undefined) { this.setDeletedAppointmentId(deleted); this.toggleConfirmationVisible(); } diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-integrated-data-shaping/material-ui/demo.tsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-integrated-data-shaping/material-ui/demo.tsx index d8d241ae00..d0a890b079 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-integrated-data-shaping/material-ui/demo.tsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-integrated-data-shaping/material-ui/demo.tsx @@ -4,11 +4,13 @@ import { Scheduler, DayView, Appointments, MonthView, Toolbar, DateNavigator, ViewSwitcher, TodayButton, Resources, AppointmentTooltip, } from '@devexpress/dx-react-scheduler-material-ui'; -import { withStyles, Theme, createStyles } from '@material-ui/core'; -import { indigo, blue, teal } from '@material-ui/core/colors'; -import Paper from '@material-ui/core/Paper'; -import { fade } from '@material-ui/core/styles/colorManipulator'; -import { WithStyles } from '@material-ui/styles'; +import { Theme } from '@mui/material'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import { indigo, blue, teal } from '@mui/material/colors'; +import Paper from '@mui/material/Paper'; +import { alpha } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; import classNames from 'clsx'; const appointments = [ @@ -158,16 +160,16 @@ const styles = ({ palette }: Theme) => createStyles({ borderLeft: `4px solid ${indigo[500]}`, }, weekEndCell: { - backgroundColor: fade(palette.action.disabledBackground, 0.04), + backgroundColor: alpha(palette.action.disabledBackground, 0.04), '&:hover': { - backgroundColor: fade(palette.action.disabledBackground, 0.04), + backgroundColor: alpha(palette.action.disabledBackground, 0.04), }, '&:focus': { - backgroundColor: fade(palette.action.disabledBackground, 0.04), + backgroundColor: alpha(palette.action.disabledBackground, 0.04), }, }, weekEndDayScaleCell: { - backgroundColor: fade(palette.action.disabledBackground, 0.06), + backgroundColor: alpha(palette.action.disabledBackground, 0.06), }, text: { overflow: 'hidden', diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-overview/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-overview/material-ui/demo.jsx index 4d20e4c6f1..df57fc7f74 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-overview/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-overview/material-ui/demo.jsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import TableCell from '@material-ui/core/TableCell'; -import { darken, fade, lighten } from '@material-ui/core/styles/colorManipulator'; -import Typography from '@material-ui/core/Typography'; +import Paper from '@mui/material/Paper'; +import TableCell from '@mui/material/TableCell'; +import Typography from '@mui/material/Typography'; import { ViewState, EditingState } from '@devexpress/dx-react-scheduler'; import classNames from 'clsx'; import { @@ -17,11 +16,12 @@ import { Resources, DragDropProvider, } from '@devexpress/dx-react-scheduler-material-ui'; -import WbSunny from '@material-ui/icons/WbSunny'; -import FilterDrama from '@material-ui/icons/FilterDrama'; -import Opacity from '@material-ui/icons/Opacity'; -import ColorLens from '@material-ui/icons/ColorLens'; -import { withStyles } from '@material-ui/core/styles'; +import WbSunny from '@mui/icons-material/WbSunny'; +import FilterDrama from '@mui/icons-material/FilterDrama'; +import Opacity from '@mui/icons-material/Opacity'; +import ColorLens from '@mui/icons-material/ColorLens'; +import { darken, alpha, lighten } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import { owners } from '../../../demo-data/tasks'; const appointments = [ @@ -95,9 +95,9 @@ const resources = [{ }]; const getBorder = theme => (`1px solid ${ - theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68) + theme.palette.mode === 'light' + ? lighten(alpha(theme.palette.divider, 1), 0.88) + : darken(alpha(theme.palette.divider, 1), 0.68) }`); const DayScaleCell = props => ( @@ -126,7 +126,7 @@ const styles = theme => ({ backgroundColor: 'white', }, '&:focus': { - backgroundColor: fade(theme.palette.primary.main, 0.15), + backgroundColor: alpha(theme.palette.primary.main, 0.15), outline: 0, }, }, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx index 52bc19e9af..8edba8f688 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { createStore } from 'redux'; import { connect, Provider } from 'react-redux'; -import Paper from '@material-ui/core/Paper'; -import TextField from '@material-ui/core/TextField'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; -import Button from '@material-ui/core/Button'; -import { withStyles } from '@material-ui/core/styles'; -import { teal, orange, red } from '@material-ui/core/colors'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import Paper from '@mui/material/Paper'; +import TextField from '@mui/material/TextField'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import Button from '@mui/material/Button'; +import { alpha } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; +import { teal, orange, red } from '@mui/material/colors'; import classNames from 'clsx'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { @@ -110,16 +110,16 @@ const styles = ({ spacing, palette }) => ({ width: '100%', }, weekendCell: { - backgroundColor: fade(palette.action.disabledBackground, 0.04), + backgroundColor: alpha(palette.action.disabledBackground, 0.04), '&:hover': { - backgroundColor: fade(palette.action.disabledBackground, 0.04), + backgroundColor: alpha(palette.action.disabledBackground, 0.04), }, '&:focus': { - backgroundColor: fade(palette.action.disabledBackground, 0.04), + backgroundColor: alpha(palette.action.disabledBackground, 0.04), }, }, weekEnd: { - backgroundColor: fade(palette.action.disabledBackground, 0.06), + backgroundColor: alpha(palette.action.disabledBackground, 0.06), }, }); diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-remote-data/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-remote-data/material-ui/demo.jsx index b856f432a1..59f9402ae9 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-remote-data/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-remote-data/material-ui/demo.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import LinearProgress from '@material-ui/core/LinearProgress'; -import { withStyles } from '@material-ui/core/styles'; +import Paper from '@mui/material/Paper'; +import LinearProgress from '@mui/material/LinearProgress'; +import withStyles from '@mui/styles/withStyles'; import { ViewState, } from '@devexpress/dx-react-scheduler'; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/basic.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/basic.jsx index 03a541a07b..2b9d7ccba8 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/basic.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/basic.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, GroupingState, IntegratedGrouping, IntegratedEditing, EditingState, } from '@devexpress/dx-react-scheduler'; @@ -15,7 +15,7 @@ import { } from '@devexpress/dx-react-scheduler-material-ui'; import { teal, indigo, -} from '@material-ui/core/colors'; +} from '@mui/material/colors'; const appointments = [{ id: 0, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/custom.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/custom.jsx index b8909775e8..78cbc3ec99 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/custom.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/custom.jsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import { green, orange } from '@material-ui/core/colors'; -import { makeStyles, fade } from '@material-ui/core/styles'; -import LowPriority from '@material-ui/icons/LowPriority'; -import PriorityHigh from '@material-ui/icons/PriorityHigh'; +import Paper from '@mui/material/Paper'; +import { green, orange } from '@mui/material/colors'; +import { alpha } from '@mui/material/styles'; +import makeStyles from '@mui/styles/makeStyles'; +import LowPriority from '@mui/icons-material/LowPriority'; +import PriorityHigh from '@mui/icons-material/PriorityHigh'; import { ViewState, GroupingState, IntegratedGrouping, } from '@devexpress/dx-react-scheduler'; @@ -29,21 +30,21 @@ const useGroupingStyles = (group) => { const color = findColorByGroupId(group.id); return makeStyles(({ spacing }) => ({ cell: { - backgroundColor: fade(color[400], 0.1), + backgroundColor: alpha(color[400], 0.1), '&:hover': { - backgroundColor: fade(color[400], 0.15), + backgroundColor: alpha(color[400], 0.15), }, '&:focus': { - backgroundColor: fade(color[400], 0.2), + backgroundColor: alpha(color[400], 0.2), }, }, headerCell: { - backgroundColor: fade(color[400], 0.1), + backgroundColor: alpha(color[400], 0.1), '&:hover': { - backgroundColor: fade(color[400], 0.1), + backgroundColor: alpha(color[400], 0.1), }, '&:focus': { - backgroundColor: fade(color[400], 0.1), + backgroundColor: alpha(color[400], 0.1), }, }, icon: { diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/editing.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/editing.jsx index d555f351d7..a418f74f75 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/editing.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/editing.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import { blue, teal } from '@material-ui/core/colors'; +import Paper from '@mui/material/Paper'; +import { blue, teal } from '@mui/material/colors'; import { ViewState, EditingState, GroupingState, IntegratedGrouping, IntegratedEditing, } from '@devexpress/dx-react-scheduler'; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-by-dates.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-by-dates.jsx index a61ad7ae85..27610733be 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-by-dates.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-by-dates.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import { green, lightBlue } from '@material-ui/core/colors'; -import { withStyles } from '@material-ui/core/styles'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Paper from '@mui/material/Paper'; +import { green, lightBlue } from '@mui/material/colors'; +import withStyles from '@mui/styles/withStyles'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; import { ViewState, EditingState, GroupingState, IntegratedGrouping, IntegratedEditing, } from '@devexpress/dx-react-scheduler'; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-orientation.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-orientation.jsx index 957ab9889e..57bcf6823f 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-orientation.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-grouping/material-ui/group-orientation.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState, GroupingState, IntegratedGrouping, IntegratedEditing, } from '@devexpress/dx-react-scheduler'; @@ -15,7 +15,7 @@ import { ViewSwitcher, DragDropProvider, } from '@devexpress/dx-react-scheduler-material-ui'; -import { blue, orange } from '@material-ui/core/colors'; +import { blue, orange } from '@mui/material/colors'; import { data as appointments } from '../../../demo-data/grouping'; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx index 4fbcaae2ea..dcb33f9b69 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import moment from 'moment'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { @@ -7,7 +7,7 @@ import { WeekView, Appointments, } from '@devexpress/dx-react-scheduler-material-ui'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { appointments } from '../../../demo-data/appointments'; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/locale.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/locale.jsx index 8a56be41e0..d219d04c66 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/locale.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/locale.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import TextField from '@material-ui/core/TextField'; -import MenuItem from '@material-ui/core/MenuItem'; +import Paper from '@mui/material/Paper'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; import { ViewState } from '@devexpress/dx-react-scheduler'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { Scheduler, WeekView, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-recurrence/material-ui/basic.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-recurrence/material-ui/basic.jsx index e22e5effac..32c4988f81 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-recurrence/material-ui/basic.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-recurrence/material-ui/basic.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/basic.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/basic.jsx index bbb50be751..49d3a5b73e 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/basic.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/basic.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, @@ -8,9 +8,9 @@ import { Appointments, AppointmentTooltip, } from '@devexpress/dx-react-scheduler-material-ui'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import { withStyles } from '@material-ui/core/styles'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import withStyles from '@mui/styles/withStyles'; const appointments = [{ title: 'Website Re-Design Plan', diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/editing.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/editing.jsx index 3ef267500a..ae07283a60 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/editing.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-resources/material-ui/editing.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState, EditingState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx index 6b57ca3f87..0283fcb728 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx @@ -5,10 +5,10 @@ import { Scheduler, WeekView, } from '@devexpress/dx-react-scheduler-material-ui'; -import Paper from '@material-ui/core/Paper'; -import IconButton from '@material-ui/core/IconButton'; -import InfoIcon from '@material-ui/icons/Info'; -import { withStyles } from '@material-ui/core/styles'; +import Paper from '@mui/material/Paper'; +import IconButton from '@mui/material/IconButton'; +import InfoIcon from '@mui/icons-material/Info'; +import withStyles from '@mui/styles/withStyles'; import appointments from '../../../demo-data/today-appointments'; const styles = theme => ({ @@ -43,7 +43,7 @@ const AppointmentBase = ({ toggleVisibility(); onAppointmentMetaChange({ target: target.parentElement.parentElement, data }); }} - > + size="large"> {children} diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/custom.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/custom.jsx index 4276fa8489..766ebf5617 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/custom.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/custom.jsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Scheduler, WeekView, Appointments, AppointmentTooltip, } from '@devexpress/dx-react-scheduler-material-ui'; -import IconButton from '@material-ui/core/IconButton'; -import MoreIcon from '@material-ui/icons/MoreVert'; -import Grid from '@material-ui/core/Grid'; -import Room from '@material-ui/icons/Room'; -import { withStyles } from '@material-ui/core/styles'; +import IconButton from '@mui/material/IconButton'; +import MoreIcon from '@mui/icons-material/MoreVert'; +import Grid from '@mui/material/Grid'; +import Room from '@mui/icons-material/Room'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; import appointments from '../../../demo-data/today-appointments'; @@ -58,7 +58,7 @@ const Header = withStyles(style, { name: 'Header' })(({ /* eslint-disable-next-line no-alert */ onClick={() => alert(JSON.stringify(appointmentData))} className={classes.commandButton} - > + size="large"> diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx index 0bbfea8906..4750e5cb5a 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { Scheduler, WeekView, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-typescript/material-ui/basic.tsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-typescript/material-ui/basic.tsx index aa8591791a..84576f48c1 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-typescript/material-ui/basic.tsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-typescript/material-ui/basic.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { AppointmentModel, ViewState, SchedulerDateTime } from '@devexpress/dx-react-scheduler'; import { Scheduler, DayView, Appointments, Resources, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx index 736ecec72c..50a08bc516 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx index 1d91f3c238..adab7cd34c 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; -import Radio from '@material-ui/core/Radio'; -import RadioGroup from '@material-ui/core/RadioGroup'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Paper from '@mui/material/Paper'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/uncontrolled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/uncontrolled.jsx index ac59bd4041..99db72eebd 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/uncontrolled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/uncontrolled.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { ViewState } from '@devexpress/dx-react-scheduler'; import { Scheduler, diff --git a/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-container.jsx b/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-container.jsx index 285845ada3..b5a751381d 100644 --- a/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-container.jsx +++ b/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-container.jsx @@ -1,32 +1,34 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; -import { blue } from '@material-ui/core/colors'; +import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from '@mui/material/styles'; +import { blue } from '@mui/material/colors'; -const lightTheme = createMuiTheme({ +const lightTheme = createTheme(adaptV4Theme({ palette: { - type: 'light', + mode: 'light', primary: blue, }, typography: { useNextVariants: true, }, -}); +})); -const darkTheme = createMuiTheme({ +const darkTheme = createTheme(adaptV4Theme({ palette: { - type: 'dark', + mode: 'dark', primary: blue, }, typography: { useNextVariants: true, }, -}); +})); const DemoContainer = ({ theme, children }) => ( - - {children} - + + + {children} + + ); DemoContainer.propTypes = { diff --git a/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-source-data.json b/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-source-data.json index 5047cfd872..4276120b5a 100644 --- a/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-source-data.json +++ b/packages/dx-react-scheduler-demos/src/theme-sources/material-ui/demo-source-data.json @@ -1,4 +1,5 @@ { - "additionalImports": "\nimport Paper from '@material-ui/core/Paper';", - "wrapperTag": "Paper" + "additionalImports": "\nimport Paper from '@mui/material/Paper';", + "wrapperTag": "Paper", + "dependencies": ["@mui/material", "@mui/icons-material"] } diff --git a/packages/dx-react-scheduler-material-ui/.eslintrc.json b/packages/dx-react-scheduler-material-ui/.eslintrc.json index b1373c6517..17c809c596 100644 --- a/packages/dx-react-scheduler-material-ui/.eslintrc.json +++ b/packages/dx-react-scheduler-material-ui/.eslintrc.json @@ -6,7 +6,7 @@ "rules": { "jsx-a11y/no-static-element-interactions": "off", "filenames/match-regex": [2, "^[a-z-\\.]+$"], - "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"] + "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"] }, "env": { "jest/globals": true diff --git a/packages/dx-react-scheduler-material-ui/package.json b/packages/dx-react-scheduler-material-ui/package.json index 5380b85143..c36c3a84a9 100644 --- a/packages/dx-react-scheduler-material-ui/package.json +++ b/packages/dx-react-scheduler-material-ui/package.json @@ -56,7 +56,9 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/material": "^5.0.0", + "@mui/styles": "^5.0.0", "@mui/icons-material": "^5.0.0", + "@mui/lab": "^5.0.0-alpha.50", "@rollup/plugin-node-resolve": "^7.1.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", @@ -84,7 +86,6 @@ }, "dependencies": { "@date-io/moment": "^1.3.11", - "@material-ui/pickers": "^3.3.10", "clsx": "^1.0.4", "prop-types": "^15.7.2" }, @@ -92,8 +93,12 @@ "@devexpress/dx-react-core": "2.7.6", "@devexpress/dx-react-scheduler": "2.7.6", "@devexpress/dx-scheduler-core": "2.7.6", + "@emotion/react": ">=11.4.1", + "@emotion/styled": ">=11.3.0", "@mui/material": ">=5.0.0", + "@mui/styles": ">=5.0.0", "@mui/icons-material": ">=5.0.0", + "@mui/lab": "^5.0.0-alpha.50", "moment": "^2.24.0", "react": ">=17.0.2" } diff --git a/packages/dx-react-scheduler-material-ui/src/plugins/appointment-tooltip.jsx b/packages/dx-react-scheduler-material-ui/src/plugins/appointment-tooltip.jsx index c150e1f5aa..91d3c4face 100644 --- a/packages/dx-react-scheduler-material-ui/src/plugins/appointment-tooltip.jsx +++ b/packages/dx-react-scheduler-material-ui/src/plugins/appointment-tooltip.jsx @@ -1,4 +1,4 @@ -import Repeat from '@material-ui/icons/Repeat'; +import Repeat from '@mui/icons-material/Repeat'; import { withComponents } from '@devexpress/dx-react-core'; import { AppointmentTooltip as AppointmentTooltipBase } from '@devexpress/dx-react-scheduler'; import { Layout } from '../templates/appointment-tooltip/layout'; diff --git a/packages/dx-react-scheduler-material-ui/src/plugins/appointments.jsx b/packages/dx-react-scheduler-material-ui/src/plugins/appointments.jsx index 063d5c341f..a87fc91e82 100644 --- a/packages/dx-react-scheduler-material-ui/src/plugins/appointments.jsx +++ b/packages/dx-react-scheduler-material-ui/src/plugins/appointments.jsx @@ -1,4 +1,4 @@ -import Repeat from '@material-ui/icons/Repeat'; +import Repeat from '@mui/icons-material/Repeat'; import { withComponents } from '@devexpress/dx-react-core'; import { Appointments as AppointmentsBase } from '@devexpress/dx-react-scheduler'; import { AppointmentContent } from '../templates/appointment/appointment-content'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.jsx index c0c27ffa47..c8b65bcd04 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import TableCell from '@material-ui/core/TableCell'; -import { withStyles } from '@material-ui/core/styles'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import TableCell from '@mui/material/TableCell'; +import { alpha } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import { VIEW_TYPES, HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION, } from '@devexpress/dx-scheduler-core'; @@ -23,7 +23,7 @@ const styles = theme => ({ backgroundColor: theme.palette.action.hover, }, '&:focus': { - backgroundColor: fade(theme.palette.primary.main, 0.15), + backgroundColor: alpha(theme.palette.primary.main, 0.15), outline: 0, }, 'tr:last-child &': { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.test.jsx index e1a9b52044..26dd74d385 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { VERTICAL_GROUP_ORIENTATION } from '@devexpress/dx-scheduler-core'; import { Cell } from './cell'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/container.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/container.jsx index b707d03102..4ee549f673 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/container.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/container.jsx @@ -1,4 +1,4 @@ -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { ContainerBase } from '../common/container'; const styles = { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.jsx index c788a50796..b6d6b5768a 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import { withStyles } from '@material-ui/core/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; import { cellsMeta, getViewCellKey } from '../utils'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.test.jsx index 1a83b0970f..e5d1ddfa05 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getClasses, createMount } from '@material-ui/core/test-utils'; +import { getClasses, createMount } from '@mui/material/test-utils'; import { Layout } from './layout'; describe('AllDayPanel', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.jsx index a2ea8fde6c..076a76ab91 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import Typography from '@material-ui/core/Typography'; -import { withStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import withStyles from '@mui/styles/withStyles'; import { VIEW_TYPES } from '@devexpress/dx-scheduler-core'; import { SPACING_CELL_HEIGHT } from '../constants'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.test.jsx index 4ecafb998a..970c9b14b1 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/title-cell.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TitleCell } from './title-cell'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.jsx index a906867d47..762f7e35d8 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; -import Grid from '@material-ui/core/Grid'; +import Grid from '@mui/material/Grid'; import { TITLE_TEXT_EDITOR, MULTILINE_TEXT_EDITOR, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.test.jsx index 371d6021a6..c84b5a0f16 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/layout.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TITLE, TITLE_TEXT_EDITOR, MULTILINE_TEXT_EDITOR } from '@devexpress/dx-scheduler-core'; import { Layout } from './layout'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.jsx index 0e96379e0d..de0da052dc 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; -import Chip from '@material-ui/core/Chip'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; +import makeStyles from '@mui/styles/makeStyles'; +import Chip from '@mui/material/Chip'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import classNames from 'clsx'; import { getAppointmentColor } from '../../utils'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.test.jsx index 083399c7d2..1c91f5d268 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/basic/resource-editor.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; -import MenuItem from '@material-ui/core/MenuItem'; +import { createShallow } from '@mui/material/test-utils'; +import MenuItem from '@mui/material/MenuItem'; import { ResourceEditor } from './resource-editor'; /* eslint-disable object-curly-newline */ diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.jsx index 4917e1ff41..4f5a72bff0 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; +import withStyles from '@mui/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; import classNames from 'clsx'; -import CloseIcon from '@material-ui/icons/Close'; +import CloseIcon from '@mui/icons-material/Close'; const styles = () => ({ button: { @@ -18,7 +18,7 @@ const CancelButtonBase = React.memo(({ className={classNames(classes.button, className)} onClick={onExecute} {...restProps} - > + size="large"> )); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.test.jsx index d608501874..76da8795bb 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/cancel-button.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import CloseIcon from '@material-ui/icons/Close'; +import { createShallow, getClasses } from '@mui/material/test-utils'; +import CloseIcon from '@mui/icons-material/Close'; import { CancelButton } from './cancel-button'; describe('AppointmentForm command', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/command-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/command-button.test.jsx index a50f5298c4..115a1373ce 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/command-button.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/command-button.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; +import { createShallow, createMount } from '@mui/material/test-utils'; import { SAVE_BUTTON, DELETE_BUTTON, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.jsx index 4f1f68ee42..649ac97fe5 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.jsx @@ -1,9 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; +import withStyles from '@mui/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; import classNames from 'clsx'; -import DeleteIcon from '@material-ui/icons/Delete'; +import DeleteIcon from '@mui/icons-material/Delete'; const styles = ({ spacing }) => ({ button: { @@ -18,7 +18,7 @@ const DeleteButtonBase = React.memo(({ className={classNames(classes.button, className)} onClick={onExecute} {...restProps} - > + size="large"> )); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.test.jsx index 7627bed3f7..f5a330b25e 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/delete-button.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import DeleteIcon from '@material-ui/icons/Delete'; +import { createShallow, getClasses } from '@mui/material/test-utils'; +import DeleteIcon from '@mui/icons-material/Delete'; import { DeleteButton } from './delete-button'; describe('AppointmentForm command', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.jsx index 13ddad886f..0bbd79ac22 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Grid from '@material-ui/core/Grid'; +import withStyles from '@mui/styles/withStyles'; +import Grid from '@mui/material/Grid'; import classNames from 'clsx'; import { SAVE_BUTTON, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.test.jsx index 83c278ef35..26fe038188 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { CANCEL_BUTTON, DELETE_BUTTON, SAVE_BUTTON } from '@devexpress/dx-scheduler-core'; import { Layout } from './layout'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.jsx index 6dd5feb324..abaddeb1d7 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import withStyles from '@mui/styles/withStyles'; +import Button from '@mui/material/Button'; import classNames from 'clsx'; import { ensureColor } from '../../utils'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.test.jsx index 95b81fb7fc..1de840212a 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/save-button.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { SaveButton } from './save-button'; describe('AppointmentForm command', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.jsx index c74fc42399..edfa78d25c 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import { withStyles } from '@material-ui/core/styles'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import withStyles from '@mui/styles/withStyles'; const styles = { label: { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.test.jsx index d04f086bb9..8f15fb5ef3 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/boolean-editor.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createMount, createShallow } from '@material-ui/core/test-utils'; -import Checkbox from '@material-ui/core/Checkbox'; +import { createMount, createShallow } from '@mui/material/test-utils'; +import Checkbox from '@mui/material/Checkbox'; import { BooleanEditor } from './boolean-editor'; describe('AppointmentForm common', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.jsx index f8a59405db..8260442010 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.jsx @@ -1,12 +1,11 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import MomentUtils from '@date-io/moment'; -import { withStyles } from '@material-ui/core/styles'; +import AdapterMoment from '@mui/lab/AdapterMoment'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; -import { - KeyboardDateTimePicker, - MuiPickersUtilsProvider, -} from '@material-ui/pickers'; +import TextField from '@mui/material/TextField'; +import DateTimePicker from '@mui/lab/DateTimePicker'; +import LocalizationProvider from '@mui/lab/LocalizationProvider'; const styles = ({ spacing }) => ({ dateEditor: { @@ -30,20 +29,17 @@ const DateEditorBase = React.memo(({ const dateFormat = excludeTime ? 'DD/MM/YYYY' : 'DD/MM/YYYY hh:mm A'; return ( - - + } value={value} onChange={memoizedChangeHandler} - format={dateFormat} - inputVariant="filled" - hiddenLabel + inputFormat={dateFormat} {...restProps} /> - + ); }); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.test.jsx index 0f5ead0e61..ce41ab9958 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/date-editor.test.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; -import { KeyboardDateTimePicker } from '@material-ui/pickers'; +import { createShallow, getClasses } from '@mui/material/test-utils'; +import DateTimePicker from '@mui/lab/DateTimePicker'; import { convertToMoment } from '@devexpress/dx-scheduler-core'; import { DateEditor } from './date-editor'; @@ -20,7 +20,7 @@ describe('AppointmentForm common', () => { )); - const datePicker = tree.find(KeyboardDateTimePicker); + const datePicker = tree.find(DateTimePicker); expect(datePicker) .toHaveLength(1); @@ -34,7 +34,7 @@ describe('AppointmentForm common', () => { )); - const dateTimePicker = tree.find(KeyboardDateTimePicker); + const dateTimePicker = tree.find(DateTimePicker); expect(dateTimePicker.at(0).is(`.${classes.dateEditor}.custom-class`)) .toBeTruthy(); @@ -45,7 +45,7 @@ describe('AppointmentForm common', () => { )); - const dateTimePicker = tree.find(KeyboardDateTimePicker); + const dateTimePicker = tree.find(DateTimePicker); dateTimePicker.at(0).simulate('change', convertToMoment(new Date())); expect(defaultProps.onValueChange) @@ -60,7 +60,7 @@ describe('AppointmentForm common', () => { /> )); - expect(tree.find(KeyboardDateTimePicker).at(0).prop('disabled')) + expect(tree.find(DateTimePicker).at(0).prop('disabled')) .toBeTruthy(); }); @@ -71,7 +71,7 @@ describe('AppointmentForm common', () => { /> )); - expect(tree.find(KeyboardDateTimePicker).at(0).prop('format')) + expect(tree.find(DateTimePicker).at(0).prop('format')) .toBe('DD/MM/YYYY hh:mm A'); }); }); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.jsx index 5d24dc6f64..6aadc5bf39 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; -import { withStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; import { TITLE, ORDINARY_LABEL } from '@devexpress/dx-scheduler-core'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.test.jsx index 47352e64ff..4deb90fd6f 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/label.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { TITLE } from '@devexpress/dx-scheduler-core'; import { Label } from './label'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.jsx index 45adcf6c9c..51857e1fb7 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import TextField from '@material-ui/core/TextField'; -import { withStyles } from '@material-ui/core/styles'; +import TextField from '@mui/material/TextField'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; import { TITLE_TEXT_EDITOR, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.test.jsx index cf969c04f7..5dd6436333 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/common/text-editor.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses, createMount } from '@material-ui/core/test-utils'; +import { createShallow, getClasses, createMount } from '@mui/material/test-utils'; import { NUMBER_EDITOR, TITLE_TEXT_EDITOR, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.jsx index d3b3a59c95..eb64f8109d 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { LAYOUT_MEDIA_QUERY } from '../constants'; const styles = { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.test.jsx index cd9e4f1edd..7928fdbe00 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/layout.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Layout } from './layout'; describe('AppointmentForm', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.jsx index 1a522e0e72..d0627c39d5 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import Drawer from '@material-ui/core/Drawer'; -import { withStyles } from '@material-ui/core/styles'; +import Drawer from '@mui/material/Drawer'; +import withStyles from '@mui/styles/withStyles'; import classNames from 'clsx'; import { TRANSITIONS_TIME, LAYOUT_MEDIA_QUERY } from '../constants'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.test.jsx index 0721f57d75..1b8b0ca717 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/overlay.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { Overlay } from './overlay'; describe('AppointmentForm', () => { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx index 7f74eac66e..052f4a6ba1 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { END_REPEAT_RADIO_GROUP, TITLE, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.test.jsx index b738d40237..afbeb4a72d 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { getRecurrenceOptions } from '@devexpress/dx-scheduler-core'; import { Layout } from './layout'; import { Daily } from './layouts/daily'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/daily.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/daily.test.jsx index 5aa3acdf30..f8a1a5c514 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/daily.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/daily.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow } from '@mui/material/test-utils'; import { getRecurrenceOptions, changeRecurrenceOptions } from '@devexpress/dx-scheduler-core'; import { Daily } from './daily'; import { IntervalEditor } from './interval-editor'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/interval-editor.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/interval-editor.jsx index 1e7f9061ed..3b491199e3 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/interval-editor.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/interval-editor.jsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Grid from '@material-ui/core/Grid'; +import withStyles from '@mui/styles/withStyles'; +import Grid from '@mui/material/Grid'; import classNames from 'clsx'; import { NUMBER_EDITOR } from '@devexpress/dx-scheduler-core'; @@ -37,7 +37,7 @@ const IntervalEditorBase = ({ { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.jsx index 1092069551..25b419996d 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { MONTHLY_RADIO_GROUP, getRecurrenceOptions, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.test.jsx index 152a705b91..b159f9b910 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/monthly.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { getRecurrenceOptions, changeRecurrenceOptions } from '@devexpress/dx-scheduler-core'; import { Monthly } from './monthly'; import { IntervalEditor } from './interval-editor'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.jsx index 6d5ebe2263..129ac21f89 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { getRecurrenceOptions, changeRecurrenceOptions, checkIsNaturalNumber } from '@devexpress/dx-scheduler-core'; import { IntervalEditor } from './interval-editor'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.test.jsx index 110e496acd..77a04869f7 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/weekly.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { getRecurrenceOptions, changeRecurrenceOptions } from '@devexpress/dx-scheduler-core'; import { Weekly } from './weekly'; import { IntervalEditor } from './interval-editor'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.jsx index 314c75a583..11b73dfae8 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { YEARLY_RADIO_GROUP, getRecurrenceOptions, diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.test.jsx index 03093a9f8e..3f1d629086 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layouts/yearly.test.jsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@mui/material/test-utils'; import { getRecurrenceOptions, changeRecurrenceOptions } from '@devexpress/dx-scheduler-core'; import { Yearly } from './yearly'; import { IntervalEditor } from './interval-editor'; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/radio-group/change-month-editor.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/radio-group/change-month-editor.jsx index 069c0ff184..490062ac09 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/radio-group/change-month-editor.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/radio-group/change-month-editor.jsx @@ -1,10 +1,10 @@ import React from 'react'; import * as PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import withStyles from '@mui/styles/withStyles'; +import FormControlLabel from '@mui/material/FormControlLabel'; import classNames from 'clsx'; -import Radio from '@material-ui/core/Radio'; -import Grid from '@material-ui/core/Grid'; +import Radio from '@mui/material/Radio'; +import Grid from '@mui/material/Grid'; import { NUMBER_EDITOR } from '@devexpress/dx-scheduler-core'; const styles = ({ spacing }) => ({ @@ -57,7 +57,7 @@ const ChangeMonthEditorBase = React.memo(({