Use material root import instead of specific components to support ESM (

#3613)
DevExpress · Dec 20, 2022 · b27ed96 · b27ed96
1 parent eeebfe9
commit b27ed96
Show file tree

Hide file tree

Showing 202 changed files with 236 additions and 350 deletions.
diff --git a/.eslintrc.react.json b/.eslintrc.react.json
@@ -12,6 +12,10 @@
     "jsx-a11y/href-no-hash": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
     "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.*", "**/testing.*"]}],
-    "react/jsx-fragments": "off"
+    "react/jsx-fragments": "off",
+    "no-restricted-imports": ["error", {
+      "paths": ["@mui/icons-material"],
+      "patterns": ["@mui/material/*"]
+    }]
   }
 }
diff --git a/packages/dx-react-chart-material-ui/.eslintrc.json b/packages/dx-react-chart-material-ui/.eslintrc.json
@@ -5,8 +5,7 @@
     ],
     "rules": {
         "jsx-a11y/no-static-element-interactions": "off",
-        "filenames/match-regex": [2, "^[a-z-\\.]+$"],
-        "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"]
+        "filenames/match-regex": [2, "^[a-z-\\.]+$"]
     },
     "env": {
       "jest/globals": true

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
@@ -1,4 +1,4 @@
-import ListItem from '@mui/material/ListItem';
+import { ListItem } from '@mui/material';
 import { withClassName, classes } from '../utils';
 
 const styles = ({ theme }) => ({

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createShallow } from '@devexpress/dx-testing';
-import ListItem from '@mui/material/ListItem';
+import { ListItem } from '@mui/material';
 import { classes } from '../utils';
 import { Item } from './item';
 

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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ListItemText from '@mui/material/ListItemText';
+import { ListItemText } from '@mui/material';
 import { withClassName, classes } 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createMount } from '@devexpress/dx-testing';
-import ListItemText from '@mui/material/ListItemText';
+import { ListItemText } from '@mui/material';
 import { classes } from '../utils';
 import { Label } from './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
@@ -1,4 +1,4 @@
-import List from '@mui/material/List';
+import { List } from '@mui/material';
 import { withClassName, classes } 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createShallow } from '@devexpress/dx-testing';
-import List from '@mui/material/List';
+import { List } from '@mui/material';
 import { classes } from '../utils';
 import { Root } from './root';
 

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
@@ -1,5 +1,5 @@
 import { ScatterSeries, withPatchedProps } from '@devexpress/dx-react-chart';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import classNames from 'clsx';
 
 const PREFIX = 'Point';

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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import { withClassName, classes } 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createMount } from '@devexpress/dx-testing';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import { classes } from '../utils';
 import { Text } from './text';
 

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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import classNames from 'clsx';
 import PropTypes from 'prop-types';
 

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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import { withClassName, classes } 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createMount } from '@devexpress/dx-testing';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import { Content } from './content';
 
 describe('Content', () => {

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
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import Popper from '@mui/material/Popper';
+import { styled, Popper } from '@mui/material';
 import { RIGHT, TOP } from '@devexpress/dx-chart-core';
 import classNames from 'clsx';
 import 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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Popper from '@mui/material/Popper';
+import { Popper } from '@mui/material';
 import { createMount } from '@devexpress/dx-testing';
 import { Overlay, classes } from './overlay';
 

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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@mui/material/Paper';
+import { Paper } from '@mui/material';
 import { withClassName, classes } 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createMount } from '@devexpress/dx-testing';
-import Paper from '@mui/material/Paper';
+import { Paper } from '@mui/material';
 import { classes } from '../utils';
 import { Sheet } from './sheet';
 

diff --git a/packages/dx-react-chart-material-ui/src/templates/utils.jsx b/packages/dx-react-chart-material-ui/src/templates/utils.jsx
@@ -1,7 +1,7 @@
 import { withPatchedProps } from '@devexpress/dx-react-chart';
 import {
   darken, alpha, lighten, styled,
-} from '@mui/material/styles';
+} from '@mui/material';
 import classNames from 'clsx';
 
 export const getBorderColor = theme => (

diff --git a/packages/dx-react-grid-material-ui/.eslintrc.json b/packages/dx-react-grid-material-ui/.eslintrc.json
@@ -5,8 +5,7 @@
     ],
     "rules": {
         "jsx-a11y/no-static-element-interactions": "off",
-        "filenames/match-regex": [2, "^[a-z-\\.]+$"],
-        "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"]
+        "filenames/match-regex": [2, "^[a-z-\\.]+$"]
     },
     "env": {
       "jest/globals": true

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import List from '@mui/material/List';
+import { List } from '@mui/material';
 
 export const Container = ({ children, ...restProps }) => (
   <List

diff --git a/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.jsx b/packages/dx-react-grid-material-ui/src/templates/column-chooser/item.jsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import Checkbox from '@mui/material/Checkbox';
-import { styled } from '@mui/material/styles';
+import {
+  ListItem, ListItemText, Checkbox, styled,
+} from '@mui/material';
 
 const PREFIX = 'Item';
 export const classes = {

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
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import Checkbox from '@mui/material/Checkbox';
+import { ListItem, ListItemText, Checkbox } from '@mui/material';
 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Popover from '@mui/material/Popover';
+import { Popover } from '@mui/material';
 
 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import Popover from '@mui/material/Popover';
+import { Popover } from '@mui/material';
 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
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import { IconButton, Tooltip } from '@mui/material';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 export const ToggleButton = ({

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
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
+import { Tooltip, IconButton } from '@mui/material';
 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
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'clsx';
-import Chip from '@mui/material/Chip';
-import { styled } from '@mui/material/styles';
+import { Chip, styled } from '@mui/material';
 
 const PREFIX = 'DragDrop';
 export const classes = {

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
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Toolbar from '@mui/material/Toolbar';
-import { styled } from '@mui/material/styles';
+import { Toolbar, styled } from '@mui/material';
 
 const PREFIX = 'EmotyMessage';
 export const classes = {

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItemMUI from '@mui/material/MenuItem';
+import { MenuItem as MenuItemMUI } from '@mui/material';
 
 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import MenuItemMUI from '@mui/material/MenuItem';
+import { MenuItem as MenuItemMUI } from '@mui/material';
 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuMUI from '@mui/material/Menu';
+import { Menu as MenuMUI } from '@mui/material';
 
 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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import MenuMUI from '@mui/material/Menu';
+import { Menu as MenuMUI } from '@mui/material';
 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
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import { IconButton, Tooltip } from '@mui/material';
 import Save from '@mui/icons-material/Save';
 
 export const ToggleButton = ({

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
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
+import { Tooltip, IconButton } from '@mui/material';
 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
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Input from '@mui/material/Input';
-import { styled } from '@mui/material/styles';
+import { Input, styled } from '@mui/material';
 
 const PREFIX = 'Editor';
 export const classes = {

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createShallow } from '@devexpress/dx-testing';
-import Input from '@mui/material/Input';
+import { Input } from '@mui/material';
 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
@@ -1,10 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-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 { styled } from '@mui/material/styles';
+import {
+  Menu, MenuItem, ListItemIcon, ListItemText, styled,
+} from '@mui/material';
 
 const PREFIX = 'FilterSelector';
 export const classes = {

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createMount } from '@devexpress/dx-testing';
-import Menu from '@mui/material/Menu';
+import { Menu } from '@mui/material';
 import { FilterSelector, classes } from './filter-selector';
 
 const defaultProps = {

diff --git a/...ages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector/toggle-button.jsx b/...ages/dx-react-grid-material-ui/src/templates/filter-row/filter-selector/toggle-button.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
+import { IconButton } from '@mui/material';
 
 export const ToggleButton = ({
   buttonRef, onToggle, disabled, children, ...restProps

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
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import SvgIcon from '@mui/material/SvgIcon';
+import { SvgIcon } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
 const AVAILABLE_PATHS = {

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
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 
 const PREFIX = 'GroupPanelContainer';
 export const classes = {

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
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 
 const PREFIX = 'GroupPanelEmptyMessage';
 export const classes = {

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
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'clsx';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import Chip from '@mui/material/Chip';
-import { styled } from '@mui/material/styles';
+import { TableSortLabel, Chip, styled } from '@mui/material';
 
 const PREFIX = 'GroupPanelItem';
 export const classes = {

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
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import Chip from '@mui/material/Chip';
-import TableSortLabel from '@mui/material/TableSortLabel';
+import { Chip, TableSortLabel } from '@mui/material';
 import { createMount, createShallow } from '@devexpress/dx-testing';
 import { GroupPanelItem, classes } from './group-panel-item';
 

diff --git 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 PropTypes from 'prop-types';
 import classNames from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 
 const PREFIX = 'Layout';
 export const classes = {