@mui/x-data-grid-generator 7.0.0-beta.0 → 7.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,169 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.1
+
+_Feb 1, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏃 Improve the filtering performance of the Data Grid by changing the `GridColDef` methods signatures (#11573) @cherniavskii
+- 🎁 The Line Chart component now has animation by default (#11620) @alexfauquette
+- 🚀 All charts have click handlers (#11411) @alexfauquette
+  Test their respective documentation demonstrations to know more about the data format:
+
+  - [Scatter Chart](https://next.mui.com/x/react-charts/scatter/#click-event)
+  - [Line Chart](https://next.mui.com/x/react-charts/lines/#click-event)
+  - [Bar Chart](https://next.mui.com/x/react-charts/bars/#click-event)
+  - [Pie Chart](https://next.mui.com/x/react-charts/pie/#click-event)
+
+  Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.
+
+### Data Grid
+
+### Breaking changes
+
+- The signature of `GridColDef['valueGetter']` has been changed for performance reasons:
+
+  ```diff
+  - valueGetter: ({ value, row }) => value,
+  + valueGetter: (value, row, column, apiRef) => value,
+  ```
+
+  The `GridValueGetterParams` interface has been removed:
+
+  ```diff
+  - const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+  + const customValueGetter: GridValueGetterFn = (value, row) => row.budget;
+  ```
+
+- The signature of `GridColDef['valueFormatter']` has been changed for performance reasons:
+
+  ```diff
+  - valueFormatter: ({ value }) => value,
+  + valueFormatter: (value, row, column, apiRef) => value,
+  ```
+
+  The `GridValueFormatterParams` interface has been removed:
+
+  ```diff
+  - const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+  + const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();
+  ```
+
+- The signature of `GridColDef['valueSetter']` has been changed for performance reasons:
+
+  ```diff
+  - valueSetter: (params) => {
+  -   const [firstName, lastName] = params.value!.toString().split(' ');
+  -   return { ...params.row, firstName, lastName };
+  - }
+  + valueSetter: (value, row) => {
+  +   const [firstName, lastName] = value!.toString().split(' ');
+  +   return { ...row, firstName, lastName };
+  +}
+  ```
+
+  The `GridValueSetterParams` interface has been removed:
+
+  ```diff
+  - const setFullName = (params: GridValueSetterParams) => {
+  -   const [firstName, lastName] = params.value!.toString().split(' ');
+  -   return { ...params.row, firstName, lastName };
+  - };
+  + const setFullName: GridValueSetter<Row> = (value, row) => {
+  +   const [firstName, lastName] = value!.toString().split(' ');
+  +   return { ...row, firstName, lastName };
+  + }
+  ```
+
+- The signature of `GridColDef['valueParser']` has been changed for performance reasons:
+
+  ```diff
+  - valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+  + valueParser: (value, row, column, apiRef) => value.toLowerCase(),
+  ```
+
+- The signature of `GridColDef['colSpan']` has been changed for performance reasons:
+
+  ```diff
+  - colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+  + colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),
+  ```
+
+- The signature of `GridColDef['pastedValueParser']` has been changed for performance reasons:
+
+  ```diff
+  - pastedValueParser: (value, params) => new Date(value),
+  + pastedValueParser: (value, row, column, apiRef) => new Date(value),
+  ```
+
+- The signature of `GridColDef['groupingValueGetter']` has been changed for performance reasons:
+
+  ```diff
+  - groupingValueGetter: (params) => params.value.name,
+  + groupingValueGetter: (value: { name: string }) => value.name,
+  ```
+
+#### `@mui/x-data-grid@7.0.0-beta.1`
+
+- [DataGrid] Add `toggleAllMode` prop to the `columnsManagement` slot (#10794) @H999
+- [DataGrid] Change `GridColDef` methods signatures (#11573) @cherniavskii
+- [DataGrid] Fix row reorder with cell selection (#11783) @PEsteves8
+- [DataGrid] Make columns management' casing consistent (#11858) @MBilalShafi
+- [l10n] Improve Hebrew (he-IL) locale (#11788) @danielmishan85
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.1`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.1`
+
+- [TimePicker] Add missing toolbar classes descriptions (#11856) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.1`.
+
+### Charts
+
+#### Breaking changes
+
+- The line chart now have animation by default.
+  You can disable it with `skipAnimation` prop.
+  See [animation documentation](next.mui.com/x/react-charts/lines/#animation) for more information.
+
+- Pie charts `onClick` get renamed `onItemClick` for consistency with other charts click callback.
+
+`@mui/x-charts@7.0.0-beta.1`
+
+- [charts] Add `onClick` support (#11411) @alexfauquette
+- [charts] Add line animation (#11620) @alexfauquette
+- [charts] Document how to modify color according to values (#11824) @alexfauquette
+- [charts] Fix Tooltip crash with out of range lines (#11898) @alexfauquette
+
+### Docs
+
+- [docs] Add a general uplift to the changelog page (#11396) @danilo-leal
+- [docs] Do not reference the Tree View overview page in the API pages (#11826) @flaviendelangle
+- [docs] Fix charts API links (#11832) @alexfauquette
+- [docs] Improve Support page (#11556) @oliviertassinari
+- [docs] Improve column visibility documentation (#11857) @MBilalShafi
+- [docs] Polish header @oliviertassinari
+- [docs] Sync support page with core @oliviertassinari
+- [docs] Update whats new page with "v7 Beta blogpost" content (#11879) @joserodolfofreitas
+
+### Core
+
+- [core] Rely on immutable ref when possible (#11847) @oliviertassinari
+- [core] Bump monorepo (#11897) @alexfauquette
+
 ## 7.0.0-beta.0
 
 _Jan 26, 2024_
@@ -1873,6 +2036,90 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.3
+
+_Feb 1, 2024_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Hebrew (he-IL) locale (#11831) @danielmishan85
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.3`
+
+- [l10n] Improve Hebrew (he-IL) locale (@danielmishan85) (#11831)
+
+#### `@mui/x-data-grid-pro@6.19.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.3`.
+
+#### `@mui/x-data-grid-premium@6.19.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.3`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.3`
+
+- [TimePicker] Add missing toolbar classes descriptions (#11862) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.3`.
+
+### Charts / `@mui/x-charts@6.19.3`
+
+- [charts] Document how to modify color according to values (#11854) @alexfauquette
+
+### Docs
+
+- [docs] Add a general uplift to the whats new page (#11883) @danilo-leal
+- [docs] Fix 404 (#11852) @alexfauquette
+- [docs] Fix <title> generation (#11825) @alexfauquette
+- [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette
+- [docs] Improve Support page (#11556) @oliviertassinari
+- [docs] Sync support page with core @oliviertassinari
+- [docs] These API don't exist in MUI X v6 @oliviertassinari
+- [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas
+
+## 6.19.2
+
+_Jan 25, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782)
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.2`
+
+- [pickers] Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782)
+
+#### `@mui/x-date-pickers-pro@6.19.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.2`, plus:
+
+- [DateRangePicker] Remove `calendars` prop on `Mobile` (@LukasTy) (#11771)
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.2`
+
+- [DataGrid] Fix support for tree with more than 50,000 children (@zenazn) (#11808)
+
+#### `@mui/x-data-grid-pro@6.19.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.2`.
+
+#### `@mui/x-data-grid-premium@6.19.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.2`.
+
 ## 6.19.1
 
 _Jan 19, 2024_

package/columns/commodities.columns.js

@@ -85,9 +85,7 @@ export const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'subTotal',
   headerName: 'Sub Total',
-  valueGetter: ({
-    row
-  }) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -101,9 +99,7 @@ export const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'feeAmount',
   headerName: 'Fee Amount',
-  valueGetter: ({
-    row
-  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -117,9 +113,7 @@ export const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'totalPrice',
   headerName: 'Total in USD',
-  valueGetter: ({
-    row
-  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
   renderCell: renderTotalPrice,
   type: 'number',
   width: 160
@@ -173,10 +167,8 @@ export const getCommodityColumns = (editable = false) => [{
     }
     return value;
   },
-  valueFormatter: ({
-    value
-  }) => value == null ? void 0 : value.label,
-  groupingValueGetter: params => params.value.code,
+  valueFormatter: value => value == null ? void 0 : value.label,
+  groupingValueGetter: value => value.code,
   sortComparator: (v1, v2, param1, param2) => gridStringOrNumberComparator(v1.label, v2.label, param1, param2),
   editable,
   width: 120

package/columns/employees.columns.js

@@ -11,9 +11,9 @@ export const getEmployeeColumns = () => [{
   headerName: 'Avatar',
   generateData: randomColor,
   renderCell: renderAvatar,
-  valueGetter: params => params.row.name == null || params.row.avatar == null ? null : {
-    name: params.row.name,
-    color: params.row.avatar
+  valueGetter: (value, row) => row.name == null || row.avatar == null ? null : {
+    name: row.name,
+    color: row.avatar
   },
   sortable: false,
   filterable: false,
@@ -77,9 +77,7 @@ export const getEmployeeColumns = () => [{
   headerName: 'Country',
   type: 'singleSelect',
   valueOptions: COUNTRY_ISO_OPTIONS_SORTED,
-  valueFormatter: ({
-    value
-  }) => value == null ? void 0 : value.label,
+  valueFormatter: value => value == null ? void 0 : value.label,
   generateData: randomCountry,
   renderCell: renderCountry,
   renderEditCell: renderEditCountry,
@@ -124,9 +122,7 @@ export const getEmployeeColumns = () => [{
   headerName: 'Salary',
   generateData: () => randomInt(30000, 80000),
   type: 'number',
-  valueFormatter: ({
-    value
-  }) => {
+  valueFormatter: value => {
     if (!value || typeof value !== 'number') {
       return value;
     }

package/hooks/useMovieData.js

@@ -15,9 +15,7 @@ const COLUMNS = [{
   type: 'number',
   width: 150,
   groupable: false,
-  valueFormatter: ({
-    value
-  }) => {
+  valueFormatter: value => {
     if (!value) {
       return '';
     }

package/hooks/useQuery.d.ts

@@ -50,10 +50,10 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         sortComparator?: import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined;
         type?: import("@mui/x-data-grid-pro").GridColType | undefined;
         align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        valueGetter?: ((params: import("@mui/x-data-grid-pro").GridValueGetterParams<any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => any) | undefined;
-        valueSetter?: ((params: import("@mui/x-data-grid-pro").GridValueSetterParams<any, any>) => any) | undefined;
-        valueFormatter?: ((params: import("@mui/x-data-grid-pro").GridValueFormatterParams<any>) => any) | undefined;
-        valueParser?: ((value: any, params?: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode> | undefined) => any) | undefined;
+        valueGetter?: import("@mui/x-data-grid-pro").GridValueGetter<any, any, any, never> | undefined;
+        valueSetter?: import("@mui/x-data-grid-pro").GridValueSetter<any, any, any> | undefined;
+        valueFormatter?: import("@mui/x-data-grid-pro").GridValueFormatter<any, any, any, never> | undefined;
+        valueParser?: import("@mui/x-data-grid-pro").GridValueParser<any, any, any> | undefined;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType<any, any> | undefined;
         renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
         renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
@@ -68,12 +68,12 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         getApplyQuickFilterFn?: import("@mui/x-data-grid-pro").GetApplyQuickFilterFn<any, any> | undefined;
         disableReorder?: boolean | undefined;
         disableExport?: boolean | undefined;
-        colSpan?: number | ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => number | undefined) | undefined;
+        colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<any, any, any> | undefined;
         renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridHeaderFilterCellProps) => React.ReactNode) | undefined;
         aggregable?: boolean | undefined;
         availableAggregationFunctions?: string[] | undefined;
-        groupingValueGetter?: ((params: import("@mui/x-data-grid-premium").GridGroupingValueGetterParams<any, any>) => import("@mui/x-data-grid-pro").GridKeyValue | null | undefined) | undefined;
-        pastedValueParser?: ((value: string, params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => any) | undefined;
+        groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
+        pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
         generateData?: ((row: any, context: import("..").GridDataGeneratorContext) => any) | undefined;
         dataGeneratorUniquenessEnabled?: boolean | undefined;
         hide?: boolean | undefined;
@@ -96,10 +96,10 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         pinnable?: boolean | undefined;
         sortComparator?: import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined;
         align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        valueGetter?: ((params: import("@mui/x-data-grid-pro").GridValueGetterParams<any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => any) | undefined;
-        valueSetter?: ((params: import("@mui/x-data-grid-pro").GridValueSetterParams<any, any>) => any) | undefined;
-        valueFormatter?: ((params: import("@mui/x-data-grid-pro").GridValueFormatterParams<any>) => any) | undefined;
-        valueParser?: ((value: any, params?: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode> | undefined) => any) | undefined;
+        valueGetter?: import("@mui/x-data-grid-pro").GridValueGetter<any, any, any, never> | undefined;
+        valueSetter?: import("@mui/x-data-grid-pro").GridValueSetter<any, any, any> | undefined;
+        valueFormatter?: import("@mui/x-data-grid-pro").GridValueFormatter<any, any, any, never> | undefined;
+        valueParser?: import("@mui/x-data-grid-pro").GridValueParser<any, any, any> | undefined;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType<any, any> | undefined;
         renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
         renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
@@ -114,12 +114,12 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         getApplyQuickFilterFn?: import("@mui/x-data-grid-pro").GetApplyQuickFilterFn<any, any> | undefined;
         disableReorder?: boolean | undefined;
         disableExport?: boolean | undefined;
-        colSpan?: number | ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => number | undefined) | undefined;
+        colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<any, any, any> | undefined;
         renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridHeaderFilterCellProps) => React.ReactNode) | undefined;
         aggregable?: boolean | undefined;
         availableAggregationFunctions?: string[] | undefined;
-        groupingValueGetter?: ((params: import("@mui/x-data-grid-premium").GridGroupingValueGetterParams<any, any>) => import("@mui/x-data-grid-pro").GridKeyValue | null | undefined) | undefined;
-        pastedValueParser?: ((value: string, params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => any) | undefined;
+        groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
+        pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
         generateData?: ((row: any, context: import("..").GridDataGeneratorContext) => any) | undefined;
         dataGeneratorUniquenessEnabled?: boolean | undefined;
         hide?: boolean | undefined;
@@ -144,10 +144,10 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         pinnable?: boolean | undefined;
         sortComparator?: import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined;
         align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        valueGetter?: ((params: import("@mui/x-data-grid-pro").GridValueGetterParams<any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => any) | undefined;
-        valueSetter?: ((params: import("@mui/x-data-grid-pro").GridValueSetterParams<any, any>) => any) | undefined;
-        valueFormatter?: ((params: import("@mui/x-data-grid-pro").GridValueFormatterParams<any>) => any) | undefined;
-        valueParser?: ((value: any, params?: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode> | undefined) => any) | undefined;
+        valueGetter?: import("@mui/x-data-grid-pro").GridValueGetter<any, any, any, never> | undefined;
+        valueSetter?: import("@mui/x-data-grid-pro").GridValueSetter<any, any, any> | undefined;
+        valueFormatter?: import("@mui/x-data-grid-pro").GridValueFormatter<any, any, any, never> | undefined;
+        valueParser?: import("@mui/x-data-grid-pro").GridValueParser<any, any, any> | undefined;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType<any, any> | undefined;
         renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
         renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
@@ -162,12 +162,12 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         getApplyQuickFilterFn?: import("@mui/x-data-grid-pro").GetApplyQuickFilterFn<any, any> | undefined;
         disableReorder?: boolean | undefined;
         disableExport?: boolean | undefined;
-        colSpan?: number | ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => number | undefined) | undefined;
+        colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<any, any, any> | undefined;
         renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridHeaderFilterCellProps) => React.ReactNode) | undefined;
         aggregable?: boolean | undefined;
         availableAggregationFunctions?: string[] | undefined;
-        groupingValueGetter?: ((params: import("@mui/x-data-grid-premium").GridGroupingValueGetterParams<any, any>) => import("@mui/x-data-grid-pro").GridKeyValue | null | undefined) | undefined;
-        pastedValueParser?: ((value: string, params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => any) | undefined;
+        groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
+        pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
         generateData?: ((row: any, context: import("..").GridDataGeneratorContext) => any) | undefined;
         dataGeneratorUniquenessEnabled?: boolean | undefined;
         hide?: boolean | undefined;

package/hooks/useQuery.js

@@ -4,16 +4,10 @@ import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-p
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
 import { randomInt } from '../services/random-generator';
+const apiRef = {};
 const simplifiedValueGetter = (field, colDef) => row => {
   var _colDef$valueGetter;
-  const params = {
-    id: row.id,
-    row,
-    field,
-    rowNode: {}
-  };
-  // @ts-ignore
-  return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, params)) || row[field];
+  return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, row[row.id], row, colDef, apiRef)) || row[field];
 };
 const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
   if (!sortModel) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.0.0-beta.0
+ * @mui/x-data-grid-generator v7.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/columns/commodities.columns.js

@@ -91,8 +91,7 @@ export var getCommodityColumns = function getCommodityColumns() {
   }, {
     field: 'subTotal',
     headerName: 'Sub Total',
-    valueGetter: function valueGetter(_ref) {
-      var row = _ref.row;
+    valueGetter: function valueGetter(value, row) {
       return row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice;
     },
     type: 'number',
@@ -110,8 +109,7 @@ export var getCommodityColumns = function getCommodityColumns() {
   }, {
     field: 'feeAmount',
     headerName: 'Fee Amount',
-    valueGetter: function valueGetter(_ref2) {
-      var row = _ref2.row;
+    valueGetter: function valueGetter(value, row) {
       return row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice;
     },
     type: 'number',
@@ -127,8 +125,7 @@ export var getCommodityColumns = function getCommodityColumns() {
   }, {
     field: 'totalPrice',
     headerName: 'Total in USD',
-    valueGetter: function valueGetter(_ref3) {
-      var row = _ref3.row;
+    valueGetter: function valueGetter(value, row) {
       return row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice;
     },
     renderCell: renderTotalPrice,
@@ -186,12 +183,11 @@ export var getCommodityColumns = function getCommodityColumns() {
       }
       return value;
     },
-    valueFormatter: function valueFormatter(_ref4) {
-      var value = _ref4.value;
+    valueFormatter: function valueFormatter(value) {
       return value == null ? void 0 : value.label;
     },
-    groupingValueGetter: function groupingValueGetter(params) {
-      return params.value.code;
+    groupingValueGetter: function groupingValueGetter(value) {
+      return value.code;
     },
     sortComparator: function sortComparator(v1, v2, param1, param2) {
       return gridStringOrNumberComparator(v1.label, v2.label, param1, param2);

package/legacy/columns/employees.columns.js

@@ -12,10 +12,10 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     headerName: 'Avatar',
     generateData: randomColor,
     renderCell: renderAvatar,
-    valueGetter: function valueGetter(params) {
-      return params.row.name == null || params.row.avatar == null ? null : {
-        name: params.row.name,
-        color: params.row.avatar
+    valueGetter: function valueGetter(value, row) {
+      return row.name == null || row.avatar == null ? null : {
+        name: row.name,
+        color: row.avatar
       };
     },
     sortable: false,
@@ -80,8 +80,7 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     headerName: 'Country',
     type: 'singleSelect',
     valueOptions: COUNTRY_ISO_OPTIONS_SORTED,
-    valueFormatter: function valueFormatter(_ref) {
-      var value = _ref.value;
+    valueFormatter: function valueFormatter(value) {
       return value == null ? void 0 : value.label;
     },
     generateData: randomCountry,
@@ -132,8 +131,7 @@ export var getEmployeeColumns = function getEmployeeColumns() {
       return randomInt(30000, 80000);
     },
     type: 'number',
-    valueFormatter: function valueFormatter(_ref2) {
-      var value = _ref2.value;
+    valueFormatter: function valueFormatter(value) {
       if (!value || typeof value !== 'number') {
         return value;
       }

package/legacy/hooks/useMovieData.js

@@ -15,8 +15,7 @@ var COLUMNS = [{
   type: 'number',
   width: 150,
   groupable: false,
-  valueFormatter: function valueFormatter(_ref) {
-    var value = _ref.value;
+  valueFormatter: function valueFormatter(value) {
     if (!value) {
       return '';
     }

package/legacy/hooks/useQuery.js

@@ -8,17 +8,11 @@ import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-p
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
 import { randomInt } from '../services/random-generator';
+var apiRef = {};
 var simplifiedValueGetter = function simplifiedValueGetter(field, colDef) {
   return function (row) {
     var _colDef$valueGetter;
-    var params = {
-      id: row.id,
-      row: row,
-      field: field,
-      rowNode: {}
-    };
-    // @ts-ignore
-    return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, params)) || row[field];
+    return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, row[row.id], row, colDef, apiRef)) || row[field];
   };
 };
 var getRowComparator = function getRowComparator(sortModel, columnsWithDefaultColDef) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.0.0-beta.0
+ * @mui/x-data-grid-generator v7.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/columns/commodities.columns.js

@@ -85,9 +85,7 @@ export const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'subTotal',
   headerName: 'Sub Total',
-  valueGetter: ({
-    row
-  }) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -101,9 +99,7 @@ export const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'feeAmount',
   headerName: 'Fee Amount',
-  valueGetter: ({
-    row
-  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -117,9 +113,7 @@ export const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'totalPrice',
   headerName: 'Total in USD',
-  valueGetter: ({
-    row
-  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
   renderCell: renderTotalPrice,
   type: 'number',
   width: 160
@@ -173,10 +167,8 @@ export const getCommodityColumns = (editable = false) => [{
     }
     return value;
   },
-  valueFormatter: ({
-    value
-  }) => value?.label,
-  groupingValueGetter: params => params.value.code,
+  valueFormatter: value => value?.label,
+  groupingValueGetter: value => value.code,
   sortComparator: (v1, v2, param1, param2) => gridStringOrNumberComparator(v1.label, v2.label, param1, param2),
   editable,
   width: 120

package/modern/columns/employees.columns.js

@@ -11,9 +11,9 @@ export const getEmployeeColumns = () => [{
   headerName: 'Avatar',
   generateData: randomColor,
   renderCell: renderAvatar,
-  valueGetter: params => params.row.name == null || params.row.avatar == null ? null : {
-    name: params.row.name,
-    color: params.row.avatar
+  valueGetter: (value, row) => row.name == null || row.avatar == null ? null : {
+    name: row.name,
+    color: row.avatar
   },
   sortable: false,
   filterable: false,
@@ -77,9 +77,7 @@ export const getEmployeeColumns = () => [{
   headerName: 'Country',
   type: 'singleSelect',
   valueOptions: COUNTRY_ISO_OPTIONS_SORTED,
-  valueFormatter: ({
-    value
-  }) => value?.label,
+  valueFormatter: value => value?.label,
   generateData: randomCountry,
   renderCell: renderCountry,
   renderEditCell: renderEditCountry,
@@ -124,9 +122,7 @@ export const getEmployeeColumns = () => [{
   headerName: 'Salary',
   generateData: () => randomInt(30000, 80000),
   type: 'number',
-  valueFormatter: ({
-    value
-  }) => {
+  valueFormatter: value => {
     if (!value || typeof value !== 'number') {
       return value;
     }

package/modern/hooks/useMovieData.js

@@ -15,9 +15,7 @@ const COLUMNS = [{
   type: 'number',
   width: 150,
   groupable: false,
-  valueFormatter: ({
-    value
-  }) => {
+  valueFormatter: value => {
     if (!value) {
       return '';
     }

package/modern/hooks/useQuery.js

@@ -4,15 +4,9 @@ import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-p
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
 import { randomInt } from '../services/random-generator';
+const apiRef = {};
 const simplifiedValueGetter = (field, colDef) => row => {
-  const params = {
-    id: row.id,
-    row,
-    field,
-    rowNode: {}
-  };
-  // @ts-ignore
-  return colDef.valueGetter?.(params) || row[field];
+  return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
 };
 const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
   if (!sortModel) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.0.0-beta.0
+ * @mui/x-data-grid-generator v7.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/columns/commodities.columns.js

@@ -91,9 +91,7 @@ const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'subTotal',
   headerName: 'Sub Total',
-  valueGetter: ({
-    row
-  }) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -107,9 +105,7 @@ const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'feeAmount',
   headerName: 'Fee Amount',
-  valueGetter: ({
-    row
-  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -123,9 +119,7 @@ const getCommodityColumns = (editable = false) => [{
 }, {
   field: 'totalPrice',
   headerName: 'Total in USD',
-  valueGetter: ({
-    row
-  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
+  valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
   renderCell: _renderer.renderTotalPrice,
   type: 'number',
   width: 160
@@ -179,10 +173,8 @@ const getCommodityColumns = (editable = false) => [{
     }
     return value;
   },
-  valueFormatter: ({
-    value
-  }) => value?.label,
-  groupingValueGetter: params => params.value.code,
+  valueFormatter: value => value?.label,
+  groupingValueGetter: value => value.code,
   sortComparator: (v1, v2, param1, param2) => (0, _xDataGridPremium.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2),
   editable,
   width: 120

package/node/columns/employees.columns.js

@@ -17,9 +17,9 @@ const getEmployeeColumns = () => [{
   headerName: 'Avatar',
   generateData: _services.randomColor,
   renderCell: _renderer.renderAvatar,
-  valueGetter: params => params.row.name == null || params.row.avatar == null ? null : {
-    name: params.row.name,
-    color: params.row.avatar
+  valueGetter: (value, row) => row.name == null || row.avatar == null ? null : {
+    name: row.name,
+    color: row.avatar
   },
   sortable: false,
   filterable: false,
@@ -83,9 +83,7 @@ const getEmployeeColumns = () => [{
   headerName: 'Country',
   type: 'singleSelect',
   valueOptions: _staticData.COUNTRY_ISO_OPTIONS_SORTED,
-  valueFormatter: ({
-    value
-  }) => value?.label,
+  valueFormatter: value => value?.label,
   generateData: _services.randomCountry,
   renderCell: _renderer.renderCountry,
   renderEditCell: _renderer.renderEditCountry,
@@ -130,9 +128,7 @@ const getEmployeeColumns = () => [{
   headerName: 'Salary',
   generateData: () => (0, _services.randomInt)(30000, 80000),
   type: 'number',
-  valueFormatter: ({
-    value
-  }) => {
+  valueFormatter: value => {
     if (!value || typeof value !== 'number') {
       return value;
     }

package/node/hooks/useMovieData.js

@@ -21,9 +21,7 @@ const COLUMNS = [{
   type: 'number',
   width: 150,
   groupable: false,
-  valueFormatter: ({
-    value
-  }) => {
+  valueFormatter: value => {
     if (!value) {
       return '';
     }

package/node/hooks/useQuery.js

@@ -13,15 +13,9 @@ var _useDemoData = require("./useDemoData");
 var _randomGenerator = require("../services/random-generator");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const apiRef = {};
 const simplifiedValueGetter = (field, colDef) => row => {
-  const params = {
-    id: row.id,
-    row,
-    field,
-    rowNode: {}
-  };
-  // @ts-ignore
-  return colDef.valueGetter?.(params) || row[field];
+  return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
 };
 const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
   if (!sortModel) {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.0.0-beta.0
+ * @mui/x-data-grid-generator v7.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "7.0.0-beta.0",
+  "version": "7.0.0-beta.1",
   "description": "Generate fake data for demo purposes only.",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -22,9 +22,9 @@
     "directory": "packages/grid/x-data-grid-generator"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.8",
-    "@mui/base": "^5.0.0-beta.33",
-    "@mui/x-data-grid-premium": "7.0.0-beta.0",
+    "@babel/runtime": "^7.23.9",
+    "@mui/base": "^5.0.0-beta.34",
+    "@mui/x-data-grid-premium": "7.0.0-beta.1",
     "chance": "^1.1.11",
     "clsx": "^2.1.0",
     "lru-cache": "^7.18.3"