Merge branch 'master' into state-pro-community

mui · Feb 14, 2022 · 694bfdc · 694bfdc
2 parents 176cef5 + 646cdf2
commit 694bfdc
Show file tree

Hide file tree

Showing 16 changed files with 450 additions and 177 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,24 +1,5 @@
 const path = require('path');
 
-let defaultPresets;
-
-// We release a ES version of MUI.
-// It's something that matches the latest official supported features of JavaScript.
-// Nothing more (stage-1, etc), nothing less (require, etc).
-if (process.env.BABEL_ENV === 'es') {
-  defaultPresets = [];
-} else {
-  defaultPresets = [
-    [
-      '@babel/preset-env',
-      {
-        bugfixes: true,
-        modules: ['esm', 'production-umd'].includes(process.env.BABEL_ENV) ? false : 'commonjs',
-      },
-    ],
-  ];
-}
-
 function resolveAliasPath(relativeToBabelConf) {
   const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
   return `./${resolvedPath.replace('\\', '/')}`;
@@ -31,53 +12,139 @@ const defaultAlias = {
   '@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'),
   'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src',
   docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
+  test: resolveAliasPath('./test'),
+  packages: resolveAliasPath('./packages'),
 };
 
-module.exports = {
-  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
-  plugins: [
+const productionPlugins = [
+  ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
+];
+
+module.exports = function getBabelConfig(api) {
+  const useESModules = api.env(['legacy', 'modern', 'stable', 'rollup']);
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        bugfixes: true,
+        browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
+        debug: process.env.MUI_BUILD_VERBOSE === 'true',
+        modules: useESModules ? false : 'commonjs',
+        shippedProposals: api.env('modern'),
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ];
+
+  const plugins = [
     'babel-plugin-optimize-clsx',
     // Need the following 3 proposals for all targets in .browserslistrc.
     // With our usage the transpiled loose mode is equivalent to spec mode.
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
     ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
-    // any package needs to declare 7.4.4 as a runtime dependency. default is ^7.0.0
-    ['@babel/plugin-transform-runtime', { version: '^7.4.4' }],
-    // for IE 11 support
-    '@babel/plugin-transform-object-assign',
     [
+      '@babel/plugin-transform-runtime',
+      {
+        useESModules,
+        // any package needs to declare 7.4.4 as a runtime dependency. default is ^7.0.0
+        version: '^7.4.4',
+      },
+    ],
+    [
+      'babel-plugin-transform-react-remove-prop-types',
+      {
+        mode: 'unsafe-wrap',
+      },
+    ],
+  ];
+
+  if (process.env.NODE_ENV === 'production') {
+    plugins.push(...productionPlugins);
+  }
+  if (process.env.NODE_ENV === 'test') {
+    plugins.push([
       'babel-plugin-module-resolver',
       {
-        root: ['./'],
-        extensions: ['.js', '.ts', '.tsx'],
         alias: defaultAlias,
+        root: ['./'],
       },
-    ],
-  ],
-  ignore: [
-    // Fix a Windows issue.
-    /@babel[\\|/]runtime/,
-    // Fix const foo = /{{(.+?)}}/gs; crashing.
-    /prettier/,
-  ],
-  env: {
-    coverage: {
-      plugins: ['babel-plugin-istanbul'],
-    },
-    test: {
-      sourceMaps: 'both',
+    ]);
+  }
+
+  return {
+    assumptions: {
+      noDocumentAll: true,
     },
-    benchmark: {
-      plugins: [
-        [
-          'babel-plugin-module-resolver',
-          {
-            alias: defaultAlias,
-          },
+    presets,
+    plugins,
+    ignore: [
+      // Fix a Windows issue.
+      /@babel[\\|/]runtime/,
+      // Fix const foo = /{{(.+?)}}/gs; crashing.
+      /prettier/,
+    ],
+    env: {
+      coverage: {
+        plugins: [
+          'babel-plugin-istanbul',
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
+        ],
+      },
+      development: {
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              alias: defaultAlias,
+              root: ['./'],
+            },
+          ],
+        ],
+      },
+      legacy: {
+        plugins: [
+          // IE11 support
+          '@babel/plugin-transform-object-assign',
+        ],
+      },
+      test: {
+        sourceMaps: 'both',
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
         ],
-      ],
+      },
+      benchmark: {
+        plugins: [
+          ...productionPlugins,
+          [
+            'babel-plugin-module-resolver',
+            {
+              alias: defaultAlias,
+            },
+          ],
+        ],
+      },
     },
-  },
+  };
 };
diff --git a/docs/data/data-grid/filtering/filtering.md b/docs/data/data-grid/filtering/filtering.md
@@ -128,7 +128,7 @@ To disable the filter of a single column, set the `filterable` property in `Grid
 In the example below, the _rating_ column can not be filtered.
 
 ```js
-<Datagrid columns={[...columns, { field: 'rating', filterable: false }]} />
+<DataGrid columns={[...columns, { field: 'rating', filterable: false }]} />
 ```
 
 {{"demo": "DisableFilteringGridSomeColumns.js", "bg": "inline", "defaultCodeOpen": false}}

diff --git a/docs/data/data-grid/sorting/sorting.md b/docs/data/data-grid/sorting/sorting.md
@@ -68,7 +68,7 @@ To disable sorting on a column, set the `sortable` property of `GridColDef` to `
 In the following demo, the user cannot use the _rating_ column as a sorting rule.
 
 ```tsx
-<Datagrid columns={[...columns, { field: 'rating', sortable: false }]} />
+<DataGrid columns={[...columns, { field: 'rating', sortable: false }]} />
 ```
 
 {{"demo": "DisableSortingGrid.js", "bg": "inline", "defaultCodeOpen": false}}

diff --git a/package.json b/package.json
@@ -57,19 +57,24 @@
     "build:codesandbox": "yarn release:build",
     "release:changelog": "node scripts/releaseChangelog",
     "release:version": "lerna version --exact --no-changelog --no-push --no-git-tag-version",
-    "release:build": "cd packages/x-license-pro && yarn build && cd ../grid/x-data-grid-pro && yarn build && cd ../x-data-grid && yarn build && cd ../x-data-grid-generator && yarn build",
+    "release:build": "yarn release:build:next && cd packages/grid/x-data-grid-pro && yarn build && cd ../x-data-grid && yarn build && cd ../x-data-grid-generator && yarn build",
+    "release:build:next": "lerna run --parallel --scope \"@mui/x-license-pro\" build",
     "release:publish": "lerna publish from-package --dist-tag latest --contents build",
     "release:publish:dry-run": "lerna publish from-package --dist-tag latest --contents build --registry=\"http://localhost:4873/\""
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
+    "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.12",
     "@babel/node": "^7.16.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
     "@babel/plugin-transform-object-assign": "^7.16.7",
+    "@babel/plugin-transform-react-constant-elements": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.16.10",
     "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@babel/register": "^7.16.9",
-    "@babel/runtime": "^7.16.7",
     "@babel/traverse": "^7.16.10",
     "@babel/types": "^7.16.8",
     "@emotion/cache": "^11.7.1",
@@ -101,10 +106,15 @@
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "argos-cli": "^0.3.3",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-search-and-replace": "^1.1.0",
+    "babel-plugin-tester": "^10.1.0",
     "babel-plugin-transform-rename-import": "^2.3.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chai": "^4.3.6",
     "chai-dom": "^1.11.0",
     "compression-webpack-plugin": "^9.2.0",
@@ -130,7 +140,7 @@
     "jss": "^10.9.0",
     "jss-plugin-template": "^10.9.0",
     "jss-rtl": "^0.3.0",
-    "karma": "^6.3.12",
+    "karma": "^6.3.16",
     "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-mocha": "^2.0.1",

diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -46,6 +46,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
     const classes = useUtilityClasses(ownerState);
     const checkboxElement = React.useRef<HTMLInputElement | null>(null);
 
+    const rippleRef = React.useRef<any>();
     const handleRef = useForkRef(checkboxElement, ref);
     const element = apiRef.current.getCellElement(id, field);
 
@@ -61,9 +62,12 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
     }, [element, tabIndex]);
 
     React.useLayoutEffect(() => {
-      if (hasFocus && checkboxElement.current) {
-        const input = checkboxElement.current.querySelector('input')!;
-        input!.focus();
+      if (hasFocus) {
+        const input = checkboxElement.current?.querySelector('input');
+        input?.focus();
+      } else if (rippleRef.current) {
+        // Only available in @mui/material v5.4.1 or later
+        rippleRef.current.stop({});
       }
     }, [hasFocus]);
 
@@ -97,6 +101,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
         inputProps={{ 'aria-label': label }}
         onKeyDown={handleKeyDown}
         disabled={!isSelectable}
+        touchRippleRef={rippleRef}
         {...rootProps.componentsProps?.baseCheckbox}
         {...other}
       />

diff --git a/packages/grid/rollup.x-data-grid-pro.config.js b/packages/grid/rollup.x-data-grid-pro.config.js
@@ -1,5 +1,4 @@
 import { generateReleaseInfo } from '@mui/x-license-pro';
-import replace from '@rollup/plugin-replace';
 import babel from '@rollup/plugin-babel';
 import typescript from 'rollup-plugin-typescript2';
 import cleaner from 'rollup-plugin-cleaner';
@@ -32,24 +31,32 @@ export default [
       return new RegExp(`(${packageName}|${packageName}\\/.*)`);
     }),
     plugins: [
-      replace({
-        __RELEASE_INFO__: generateReleaseInfo(),
-      }),
       production &&
         cleaner({
           targets: ['./x-data-grid-pro/build/'],
         }),
       typescript({ tsconfig: 'tsconfig.build.json' }),
       babel({
         babelHelpers: 'bundled',
-        extensions: ['.tsx'],
+        extensions: ['.tsx', '.ts'],
         plugins: [
           [
             'transform-react-remove-prop-types',
             {
               ignoreFilenames: ['DataGridPro.tsx'],
             },
           ],
+          [
+            'search-and-replace',
+            {
+              rules: [
+                {
+                  search: '__RELEASE_INFO__',
+                  replace: generateReleaseInfo(),
+                },
+              ],
+            },
+          ],
         ],
       }),
       !production && sourceMaps(),

diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
@@ -32,7 +32,7 @@ function fireClickEvent(cell: HTMLElement) {
 }
 
 describe('<DataGrid /> - Selection', () => {
-  const { render } = createRenderer();
+  const { render, clock } = createRenderer();
 
   const defaultData = getData<GridApi>(4, 2);
 
@@ -450,6 +450,26 @@ describe('<DataGrid /> - Selection', () => {
 
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
+
+    describe('ripple', () => {
+      clock.withFakeTimers();
+
+      it('should keep only one ripple visible when navigating between checkboxes', function test() {
+        if (isJSDOM || /firefox/i.test(window.navigator.userAgent)) {
+          // JSDOM doesn't fire "blur" when .focus is called in another element
+          // FIXME Firefox doesn't show any ripple
+          this.skip();
+        }
+        render(<TestDataGridSelection checkboxSelection />);
+        const cell = getCell(1, 1);
+        fireEvent.mouseUp(cell);
+        fireEvent.click(cell);
+        fireEvent.keyDown(cell, { key: 'ArrowLeft' });
+        fireEvent.keyDown(getCell(1, 0).querySelector('input'), { key: 'ArrowUp' });
+        clock.runToLast(); // Wait for transition
+        expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1);
+      });
+    });
   });
 
   describe('props: isRowSelectable', () => {

diff --git a/packages/x-license-pro/LICENSE → packages/x-license-pro/LICENSE.txt b/packages/x-license-pro/LICENSE → packages/x-license-pro/LICENSE.txt