@mui/x-data-grid-generator 6.0.0-alpha.0 → 6.0.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,139 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.1
+
+_Sep 29, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Better support for custom overlays (#5808) @cherniavskii
+- 🖨️ Improve print export (#6273) @oliviertassinari
+- 🎁 Reduce confusion when initializing pickers with a date value (#6170) @flaviendelangle
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.1` / `@mui/x-data-grid-pro@v6.0.0-alpha.1` / `@mui/x-data-grid-premium@v6.0.0-alpha.1`
+
+#### Breaking changes
+
+- New internal rows structure for v6 (#4927) @flaviendelangle
+
+  Some selectors related to the rows have been renamed to better describe the type of rows they are returning:
+
+  ```diff
+  -const result = gridRowsIdToIdLookupSelector(apiRef);
+  +const result = gridRowsDataRowIdToIdLookupSelector(apiRef);
+  ```
+
+  ```diff
+  -const result = gridRowTreeDepthSelector(apiRef);
+  +const result = gridRowMaximumTreeDepthSelector(apiRef);
+  ```
+
+  The format of the tree nodes (the element accessible in `params.node` or with the `apiRef.current.getRowNode` method) have changed.
+  You have a new `type` property, which can be useful, for example, to apply custom behavior on groups.
+  Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
+
+  ```diff
+   <DataGridPremium 
+     groupingColDef={() => ({
+       valueFormatter: (params) => {
+         if (params.id == null) {
+           return params.value;
+         }
+
+         const rowNode = apiRef.current.getRowNode(params.id!)!;
+  -      if (rowNode.children?.length) {
+  +      if (rowNode.type === 'group') {
+           return `by ${rowNode.groupingKey ?? ''}`;
+         }
+
+         return params.value;
+       }
+     })}
+   />
+  ```
+
+- The `GridFeatureModeConstant` constant no longer exists (#6077) @DanailH
+
+  ```diff
+  -import { GridFeatureModeConstant } from '@mui/x-data-grid';
+  ```
+
+#### Changes
+
+- [DataGrid] Fix `GridPagination` props typing (#6238) @cherniavskii
+- [DataGrid] Fix `GridRow` not forwarding `ref` to the root element (#6274) @cherniavskii
+- [DataGrid] Fix `undefined` value being showed in filter button tooltip text (#6259) @cherniavskii
+- [DataGrid] Fix blank space when changing page with dynamic row height (#6049) @m4theushw
+- [DataGrid] New internal rows structure for v6 (#4927) @flaviendelangle
+- [DataGrid] Revert cell/row mode if `processRowUpdate` fails (#6185) @m4theushw
+- [DataGrid] Rework overlays layout (#5808) @cherniavskii
+- [DataGrid] Improve print support (#6273) @oliviertassinari
+- [DataGridPremium] Add missing `themeAugmentation` module (#6270) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.1` / `@mui/x-date-pickers-pro@v6.0.0-alpha.1`
+
+#### Breaking changes
+
+- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+
+  The `value` prop of the pickers now expects a parsed value.
+  Until now, it was possible to provide any format that your date management library was able to parse.
+  For instance, you could pass `value={new Date()}` when using `AdapterDayjs`.
+
+  This brought a lot of confusion so we decided to remove this behavior.
+  The format expected by the `value` prop is now the same as for any other prop holding a date.
+  Here is the syntax to initialize a date picker at the current date for each adapter:
+
+  ```tsx
+  // Date-fns
+  <DatePicker value={new Date()} />
+
+  // Dayjs
+  import dayjs from 'dayjs'
+  <DatePicker value={dayjs()} />
+
+  // Moment
+  import moment from 'moment'
+  <DatePicker value={moment()} />
+
+  // Luxon
+  import { DateTime } from 'luxon'
+  <DatePicker value={DateTime.now()} />
+  ```
+
+#### Changes
+
+- [DatePicker] Respect `minDate` and `maxDate` when opening a `DatePicker` or `DateTimePicker` (#6309) @alexfauquette
+- [DateTimePicker] Fix validation with `shouldDisableMonth` and `shouldDisableYear` (#6266) @flaviendelangle
+- [TimePicker] Add support for `disablePast` and `disableFuture` validation props (#6226) @LukasTy
+- [CalendarPicker] Prevent getting focus when `autoFocus=false` (#6304) @alexfauquette
+- [DateField] Extend moment adapter to support `expandFormat` and `formatTokenMap` (#6215) @alexfauquette
+- [pickers] Allow to control the selected sections (#6209, #6307) @flaviendelangle
+- [pickers] Do not loose the value of date sections not present in the format in the new field components (#6141) @flaviendelangle
+- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+- [pickers] Support slots on the `DateField` component  (#6048) @flaviendelangle
+- [pickers] Support Luxon v3 in `AdapterLuxon` (#6069) @alexfauquette
+- [pickers] New components `TimeField` and `DateTimeField` (#6312) @flaviendelangle
+- [pickers] Support basic mobile edition on new field components (#5958) @flaviendelangle
+
+### Docs
+
+- [docs] Fix issue in DataGrid/DataGridPro row styling demo (#6264) @MBilalShafi
+- [docs] Improve pickers Getting Started examples (#6292) @flaviendelangle
+- [docs] Pass model change callbacks in controlled grid editing demos (#6296) @cherniavskii
+- [docs] Update the CodeSandbox to use the `next` branch (#6275) @oliviertassinari
+
+### Core
+
+- [core] Fix typing error (#6291) @flaviendelangle
+- [core] Fix typo in the state updater of `useField` (#6311) @flaviendelangle
+- [core] Remove `GridFeatureModeConstant` (#6077) @DanailH
+- [core] Simplify testing architecture (#6043) @flaviendelangle
+- [test] Skip test in Chrome non-headless and Edge (#6318) @m4theushw
+
 ## 6.0.0-alpha.0
 
 _Sep 22, 2022_

package/columns/commodities.columns.js

@@ -86,9 +86,8 @@ export const getCommodityColumns = (editable = false) => [{
   field: 'subTotal',
   headerName: 'Sub Total',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.quantity * row.unitPrice,
+    row
+  }) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -103,9 +102,8 @@ export const getCommodityColumns = (editable = false) => [{
   field: 'feeAmount',
   headerName: 'Fee Amount',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.feeRate * row.quantity * row.unitPrice,
+    row
+  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -120,9 +118,8 @@ export const getCommodityColumns = (editable = false) => [{
   field: 'totalPrice',
   headerName: 'Total in USD',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.feeRate + row.quantity * row.unitPrice,
+    row
+  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
   renderCell: renderTotalPrice,
   type: 'number',
   width: 160

package/columns/employees.columns.js

@@ -11,7 +11,7 @@ export const getEmployeeColumns = () => [{
   headerName: 'Avatar',
   generateData: randomColor,
   renderCell: renderAvatar,
-  valueGetter: params => params.rowNode.isAutoGenerated ? null : {
+  valueGetter: params => params.row.name == null || params.row.avatar == null ? null : {
     name: params.row.name,
     color: params.row.avatar
   },

package/hooks/useQuery.d.ts

@@ -54,13 +54,13 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         type?: string | undefined;
         valueOptions?: import("@mui/x-data-grid-pro").ValueOptions[] | ((params: import("@mui/x-data-grid-pro").GridValueOptionsParams<any>) => import("@mui/x-data-grid-pro").ValueOptions[]) | undefined;
         align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        valueGetter?: ((params: import("@mui/x-data-grid-pro").GridValueGetterParams<any, any>) => any) | 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> | undefined) => 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;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType | undefined;
-        renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any>) => React.ReactNode) | undefined;
-        renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any>) => React.ReactNode) | 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;
         preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps<any, any>) => import("@mui/x-data-grid-pro").GridEditCellProps<any> | Promise<import("@mui/x-data-grid-pro").GridEditCellProps<any>>) | undefined;
         headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType | undefined;
         renderHeader?: ((params: import("@mui/x-data-grid-pro").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
@@ -69,10 +69,10 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         disableColumnMenu?: boolean | undefined;
         filterable?: boolean | undefined;
         filterOperators?: GridFilterOperator<any, any, any>[] | undefined;
-        getApplyQuickFilterFn?: ((value: any, colDef: import("@mui/x-data-grid-pro").GridStateColDef<any, any, any>, apiRef: React.MutableRefObject<import("@mui/x-data-grid/internals").GridApiCommunity>) => ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any>) => boolean) | null) | undefined;
+        getApplyQuickFilterFn?: ((value: any, colDef: import("@mui/x-data-grid-pro").GridStateColDef<any, any, any>, apiRef: React.MutableRefObject<import("@mui/x-data-grid/internals").GridApiCommunity>) => ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => boolean) | null) | undefined;
         disableReorder?: boolean | undefined;
         disableExport?: boolean | undefined;
-        colSpan?: number | ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any>) => number | undefined) | undefined;
+        colSpan?: number | ((params: import("@mui/x-data-grid-pro").GridCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNode>) => number | undefined) | 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;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/columns/commodities.columns.js

@@ -92,9 +92,8 @@ export var getCommodityColumns = function getCommodityColumns() {
     field: 'subTotal',
     headerName: 'Sub Total',
     valueGetter: function valueGetter(_ref) {
-      var row = _ref.row,
-          rowNode = _ref.rowNode;
-      return rowNode.isAutoGenerated ? null : row.quantity * row.unitPrice;
+      var row = _ref.row;
+      return row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice;
     },
     type: 'number',
     width: 120
@@ -112,9 +111,8 @@ export var getCommodityColumns = function getCommodityColumns() {
     field: 'feeAmount',
     headerName: 'Fee Amount',
     valueGetter: function valueGetter(_ref2) {
-      var row = _ref2.row,
-          rowNode = _ref2.rowNode;
-      return rowNode.isAutoGenerated ? null : row.feeRate * row.quantity * row.unitPrice;
+      var row = _ref2.row;
+      return row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice;
     },
     type: 'number',
     width: 120
@@ -130,9 +128,8 @@ export var getCommodityColumns = function getCommodityColumns() {
     field: 'totalPrice',
     headerName: 'Total in USD',
     valueGetter: function valueGetter(_ref3) {
-      var row = _ref3.row,
-          rowNode = _ref3.rowNode;
-      return rowNode.isAutoGenerated ? null : row.feeRate + row.quantity * row.unitPrice;
+      var row = _ref3.row;
+      return row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice;
     },
     renderCell: renderTotalPrice,
     type: 'number',

package/legacy/columns/employees.columns.js

@@ -13,7 +13,7 @@ export var getEmployeeColumns = function getEmployeeColumns() {
     generateData: randomColor,
     renderCell: renderAvatar,
     valueGetter: function valueGetter(params) {
-      return params.rowNode.isAutoGenerated ? null : {
+      return params.row.name == null || params.row.avatar == null ? null : {
         name: params.row.name,
         color: params.row.avatar
       };

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/renderer/renderLink.js

@@ -21,7 +21,7 @@ export var DemoLink = /*#__PURE__*/React.memo(function DemoLink(props) {
   });
 });
 export function renderLink(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
   }
 

package/legacy/renderer/renderStatus.js

@@ -68,7 +68,7 @@ var Status = /*#__PURE__*/React.memo(function (props) {
   });
 });
 export function renderStatus(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/modern/columns/commodities.columns.js

@@ -86,9 +86,8 @@ export const getCommodityColumns = (editable = false) => [{
   field: 'subTotal',
   headerName: 'Sub Total',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.quantity * row.unitPrice,
+    row
+  }) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -103,9 +102,8 @@ export const getCommodityColumns = (editable = false) => [{
   field: 'feeAmount',
   headerName: 'Fee Amount',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.feeRate * row.quantity * row.unitPrice,
+    row
+  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -120,9 +118,8 @@ export const getCommodityColumns = (editable = false) => [{
   field: 'totalPrice',
   headerName: 'Total in USD',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.feeRate + row.quantity * row.unitPrice,
+    row
+  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
   renderCell: renderTotalPrice,
   type: 'number',
   width: 160

package/modern/columns/employees.columns.js

@@ -11,7 +11,7 @@ export const getEmployeeColumns = () => [{
   headerName: 'Avatar',
   generateData: randomColor,
   renderCell: renderAvatar,
-  valueGetter: params => params.rowNode.isAutoGenerated ? null : {
+  valueGetter: params => params.row.name == null || params.row.avatar == null ? null : {
     name: params.row.name,
     color: params.row.avatar
   },

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/renderer/renderLink.js

@@ -21,7 +21,7 @@ export const DemoLink = /*#__PURE__*/React.memo(function DemoLink(props) {
   });
 });
 export function renderLink(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
   }
 

package/modern/renderer/renderStatus.js

@@ -69,7 +69,7 @@ const Status = /*#__PURE__*/React.memo(props => {
   });
 });
 export function renderStatus(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/node/columns/commodities.columns.js

@@ -97,9 +97,8 @@ const getCommodityColumns = (editable = false) => [{
   field: 'subTotal',
   headerName: 'Sub Total',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.quantity * row.unitPrice,
+    row
+  }) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -114,9 +113,8 @@ const getCommodityColumns = (editable = false) => [{
   field: 'feeAmount',
   headerName: 'Fee Amount',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.feeRate * row.quantity * row.unitPrice,
+    row
+  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice,
   type: 'number',
   width: 120
 }, {
@@ -131,9 +129,8 @@ const getCommodityColumns = (editable = false) => [{
   field: 'totalPrice',
   headerName: 'Total in USD',
   valueGetter: ({
-    row,
-    rowNode
-  }) => rowNode.isAutoGenerated ? null : row.feeRate + row.quantity * row.unitPrice,
+    row
+  }) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice,
   renderCell: _renderer.renderTotalPrice,
   type: 'number',
   width: 160

package/node/columns/employees.columns.js

@@ -22,7 +22,7 @@ const getEmployeeColumns = () => [{
   headerName: 'Avatar',
   generateData: _services.randomColor,
   renderCell: _renderer.renderAvatar,
-  valueGetter: params => params.rowNode.isAutoGenerated ? null : {
+  valueGetter: params => params.row.name == null || params.row.avatar == null ? null : {
     name: params.row.name,
     color: params.row.avatar
   },

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/renderer/renderLink.js

@@ -38,7 +38,7 @@ const DemoLink = /*#__PURE__*/React.memo(function DemoLink(props) {
 exports.DemoLink = DemoLink;
 
 function renderLink(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
   }
 

package/node/renderer/renderStatus.js

@@ -91,7 +91,7 @@ const Status = /*#__PURE__*/React.memo(props => {
 });
 
 function renderStatus(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-alpha.1",
   "description": "Generate fake data for demo purposes only.",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@mui/base": "^5.0.0-alpha.98",
-    "@mui/x-data-grid-premium": "6.0.0-alpha.0",
+    "@mui/x-data-grid-premium": "6.0.0-alpha.1",
     "chance": "^1.1.8",
     "clsx": "^1.2.1",
     "lru-cache": "^7.14.0"

package/renderer/renderLink.js

@@ -21,7 +21,7 @@ export const DemoLink = /*#__PURE__*/React.memo(function DemoLink(props) {
   });
 });
 export function renderLink(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
   }
 

package/renderer/renderStatus.js

@@ -69,7 +69,7 @@ const Status = /*#__PURE__*/React.memo(props => {
   });
 });
 export function renderStatus(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }