Merge branch 'master' into fix-picker-popper-paper-owner-state

Author: LukasTy

docs/data/charts/funnel/FunnelCurves.js

@@ -4,7 +4,14 @@ import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import Stack from '@mui/material/Stack';
 import { populationByEducationLevelPercentageSeries } from './populationByEducationLevel';
 
-const curveTypes = ['bump', 'linear', 'step', 'pyramid', 'step-pyramid'];
+const curveTypes = [
+  'bump',
+  'linear',
+  'linear-sharp',
+  'step',
+  'pyramid',
+  'step-pyramid',
+];
 
 export default function FunnelCurves() {
   return (

docs/data/charts/funnel/FunnelCurves.tsx

@@ -4,7 +4,14 @@ import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import Stack from '@mui/material/Stack';
 import { populationByEducationLevelPercentageSeries } from './populationByEducationLevel';
 
-const curveTypes = ['bump', 'linear', 'step', 'pyramid', 'step-pyramid'] as const;
+const curveTypes = [
+  'bump',
+  'linear',
+  'linear-sharp',
+  'step',
+  'pyramid',
+  'step-pyramid',
+] as const;
 
 export default function FunnelCurves() {
   return (

docs/data/charts/funnel/funnel.md

@@ -72,7 +72,7 @@ It also accepts a function that receives the data object and should return the l
 ### Curve interpolation
 
 The interpolation between data points can be customized by the `curve` property.
-This property expects one of the following string values, corresponding to the interpolation method: `'linear'`, `'bump'`, `'pyramid'`, `'step'` and `'step-pyramid'`.
+This property expects one of the following string values, corresponding to the interpolation method: `'linear'`, `'linear-sharp'`, `'bump'`, `'pyramid'`, `'step'` and `'step-pyramid'`.
 
 This series property adds the option to control the interpolation of a series.
 
@@ -91,8 +91,8 @@ The border radius of the sections can be customized by the `borderRadius` proper
 It accepts a number that represents the radius in pixels.
 
 - The `bump` curve interpolation will not respect the border radius.
-- The `linear` and `pyramid` curve respects the border radius to some extent due to the angle of the sections.
-- The `step` and `step-pyramid` curve respects the border radius.
+- The `linear`, `linear-sharp` and `pyramid` curves respect the border radius to some extent due to the angle of the sections.
+- The `step` and `step-pyramid` curves respect the border radius.
 
 To understand how the border radius interacts with the `curve` prop, see the [curve interpolation example](/x/react-charts/funnel/#curve-interpolation) above.
 

docs/data/data-grid/column-pinning/ColumnPinningWithCheckboxSelection.js renamed to docs/data/data-grid/column-pinning/ColumnPinningAutogeneratedColumns.js

@@ -5,6 +5,7 @@ import {
   DataGridPro,
   GridActionsCellItem,
   GRID_CHECKBOX_SELECTION_COL_DEF,
+  GRID_REORDER_COL_DEF,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -13,16 +14,20 @@ import {
   randomUpdatedDate,
 } from '@mui/x-data-grid-generator';
 
-export default function ColumnPinningWithCheckboxSelection() {
+export default function ColumnPinningAutogeneratedColumns() {
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGridPro
         rows={rows}
         columns={columns}
         checkboxSelection
+        rowReordering
         initialState={{
           pinnedColumns: {
-            left: [GRID_CHECKBOX_SELECTION_COL_DEF.field],
+            left: [
+              GRID_REORDER_COL_DEF.field,
+              GRID_CHECKBOX_SELECTION_COL_DEF.field,
+            ],
             right: ['actions'],
           },
         }}

docs/data/data-grid/column-pinning/ColumnPinningWithCheckboxSelection.tsx renamed to docs/data/data-grid/column-pinning/ColumnPinningAutogeneratedColumns.tsx

@@ -7,6 +7,7 @@ import {
   GridRowsProp,
   GridActionsCellItem,
   GRID_CHECKBOX_SELECTION_COL_DEF,
+  GRID_REORDER_COL_DEF,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -15,16 +16,20 @@ import {
   randomUpdatedDate,
 } from '@mui/x-data-grid-generator';
 
-export default function ColumnPinningWithCheckboxSelection() {
+export default function ColumnPinningAutogeneratedColumns() {
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGridPro
         rows={rows}
         columns={columns}
         checkboxSelection
+        rowReordering
         initialState={{
           pinnedColumns: {
-            left: [GRID_CHECKBOX_SELECTION_COL_DEF.field],
+            left: [
+              GRID_REORDER_COL_DEF.field,
+              GRID_CHECKBOX_SELECTION_COL_DEF.field,
+            ],
             right: ['actions'],
           },
         }}

docs/data/data-grid/column-pinning/ColumnPinningWithCheckboxSelection.tsx.preview renamed to docs/data/data-grid/column-pinning/ColumnPinningAutogeneratedColumns.tsx.preview

@@ -2,9 +2,13 @@
   rows={rows}
   columns={columns}
   checkboxSelection
+  rowReordering
   initialState={{
     pinnedColumns: {
-      left: [GRID_CHECKBOX_SELECTION_COL_DEF.field],
+      left: [
+        GRID_REORDER_COL_DEF.field,
+        GRID_CHECKBOX_SELECTION_COL_DEF.field,
+      ],
       right: ['actions'],
     },
   }}

docs/data/data-grid/column-pinning/column-pinning.md

@@ -114,11 +114,14 @@ Another alternate option to disable pinning actions on the UI is to disable the
 
 :::
 
-## Pinning the checkbox selection column
+## Pinning autogenerated columns
 
-To pin the checkbox column added when using `checkboxSelection`, add `GRID_CHECKBOX_SELECTION_COL_DEF.field` to the list of pinned columns.
+Some features add columns to the grid.
+Pin those columns by providing their field names to the list of pinned columns.
 
-{{"demo": "ColumnPinningWithCheckboxSelection.js", "bg": "inline"}}
+To pin the row reordering column added when using `rowReordering` and checkbox column added when using `checkboxSelection`, add `GRID_REORDER_COL_DEF.field` and `GRID_CHECKBOX_SELECTION_COL_DEF.field` to the list of pinned columns.
+
+{{"demo": "ColumnPinningAutogeneratedColumns.js", "bg": "inline"}}
 
 ## Usage with dynamic row height
 

docs/data/data-grid/row-grouping/row-grouping.md

@@ -69,6 +69,10 @@ To display a grouping column for each criterion, set the `rowGroupingColumnMode`
 Use the `groupingColDef` prop to customize the rendering of the grouping column.
 You can override any property from the column definition (`GridColDef`) interface, with the exceptions of the `field`, the `type`, and the properties related to inline editing.
 
+:::success
+For better performance, keep `groupingColDef` prop reference stable between two renders.
+:::
+
 {{"demo": "RowGroupingCustomGroupingColDefObject.js", "bg": "inline", "defaultCodeOpen": false}}
 
 By default, when using the object format, the properties are applied to all grouping columns.
@@ -77,11 +81,6 @@ This means that if `rowGroupingColumnMode` is set to `multiple`, then all column
 To override properties for specific grouping columns, or to apply different overrides based on the current grouping criteria, you can pass a callback function to `groupingColDef` instead of an object with its config.
 The callback is called for each grouping column, and it receives the respective column's fields as parameters.
 
-:::warning
-The `groupingColDef` prop, same as `columns` prop, should keep the same reference between two renders.
-Otherwise, the grouping column processing can happen multiple times and outside of the required order, resulting in a wrong column placement.
-:::
-
 The demo below illustrates this approach to provide buttons for toggling between different grouping criteria:
 
 {{"demo": "RowGroupingCustomGroupingColDefCallback.js", "bg": "inline", "defaultCodeOpen": false}}

docs/package.json

@@ -102,6 +102,7 @@
     "@babel/preset-typescript": "^7.27.1",
     "@mui/internal-docs-utils": "^2.0.1",
     "@mui/internal-scripts": "^2.0.8",
+    "@types/chai": "^5.2.2",
     "@types/chance": "^1.1.6",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",

package.json

@@ -88,8 +88,8 @@
     "@mui/internal-babel-plugin-display-name": "^1.0.0",
     "@mui/internal-babel-plugin-resolve-imports": "^2.0.3",
     "@mui/internal-bundle-size-checker": "^1.0.4",
-    "@mui/internal-markdown": "^2.0.5",
-    "@mui/internal-test-utils": "^2.0.8",
+    "@mui/internal-markdown": "^2.0.6",
+    "@mui/internal-test-utils": "^2.0.9",
     "@mui/material": "^7.1.1",
     "@mui/monorepo": "github:mui/material-ui#8cd3aa5849fe8fc2dd98eccc75366fae364d15f8",
     "@mui/utils": "^7.1.1",
@@ -99,6 +99,7 @@
     "@playwright/test": "^1.52.0",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.7",
+    "@types/chai": "^5.2.2",
     "@types/chai-dom": "^1.11.3",
     "@types/fs-extra": "^11.0.4",
     "@types/karma": "^6.3.9",
@@ -126,7 +127,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-transform-replace-expressions": "^0.2.0",
-    "chai": "^4.5.0",
+    "chai": "^5.2.0",
     "chai-dom": "^1.12.1",
     "compression-webpack-plugin": "^11.1.0",
     "concurrently": "^9.1.2",

packages/eslint-plugin-material-ui/package.json

@@ -10,7 +10,7 @@
     "@typescript-eslint/utils": "^8.33.0"
   },
   "scripts": {
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000"
+    "test": "vitest"
   },
   "repository": {
     "type": "git",

packages/eslint-plugin-material-ui/src/rules/no-direct-state-access.test.js renamed to packages/eslint-plugin-material-ui/src/rules/no-direct-state-access.test.ts

@@ -1,18 +1,13 @@
-// The polyfill of `import.meta.url` used in @eslint/eslintrc tests the presence
-// of `document` to detect if it's on node or web. However, JSDOM sets `document`
-// so it thinks it's on the web and can't import correctly other modules.
-// The workaround here resets the `document` to make it detect that it's on node.
-// It can removed once this repo became an ESM package.
-const originalDocument = global.document;
-global.document = undefined;
+import { afterAll, it, describe } from 'vitest';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import TSESlintParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import rule from './no-direct-state-access';
 
-const path = require('path');
-const mocha = require('mocha');
-const { RuleTester } = require('@typescript-eslint/rule-tester');
-const TSESlintParser = require('@typescript-eslint/parser');
-const rule = require('./no-direct-state-access');
-
-RuleTester.afterAll = mocha.after;
+RuleTester.afterAll = afterAll;
+RuleTester.it = it;
+RuleTester.itOnly = it.only;
+RuleTester.describe = describe;
 
 const ruleTester = new RuleTester({
   languageOptions: {
@@ -26,24 +21,34 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('no-direct-state-access', rule, {
   valid: [
-    `
+    {
+      name: 'assigning received grid state to a variable',
+      code: `
 const useCustomHook = (apiRef: GridApiRef) => {
   const state = apiRef.current.state;
 }
     `,
-    `
+    },
+    {
+      name: 'accessing any state directly',
+      code: `
 const useCustomHook = (api: any) => {
   const rows = api.current.state.rows;
 }
     `,
-    `
+    },
+    {
+      name: 'passing any state to a function',
+      code: `
 const useCustomHook = (api: any) => {
   const rows = gridRowsSelector(api.current.state);
 }
     `,
+    },
   ],
   invalid: [
     {
+      name: 'directly accessing variable inside received grid state',
       code: `
 type GridApiRef = React.MutableRefObject<any>;
 const useCustomHook = (apiRef: GridApiRef) => {
@@ -53,6 +58,7 @@ const useCustomHook = (apiRef: GridApiRef) => {
       errors: [{ messageId: 'direct-access', line: 4, column: 16 }],
     },
     {
+      name: 'directly accessing variable inside grid state from the hook context',
       code: `
 type GridApiRef = React.MutableRefObject<any>;
 const useGridApiContext = (): GridApiRef => { return {} };
@@ -64,6 +70,7 @@ const useCustomHook = () => {
       errors: [{ messageId: 'direct-access', line: 6, column: 16 }],
     },
     {
+      name: 'destructuring variable from grid state',
       code: `
 type GridApiRef = React.MutableRefObject<any>;
 const useGridApiContext = (): GridApiRef => { return {} };
@@ -76,5 +83,3 @@ const useCustomHook = () => {
     },
   ],
 });
-
-global.document = originalDocument;

packages/eslint-plugin-material-ui/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "target": "es5",
+    "module": "preserve",
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": ["es2015", "es2017", "esnext"],
+    "experimentalDecorators": true,
+    "types": ["node"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
+}

packages/eslint-plugin-material-ui/vitest.config.node.mts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+});