@mui/x-data-grid-premium 5.11.0 → 5.11.1

package/CHANGELOG.md

@@ -3,21 +3,111 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.11.1
+
+_May 20, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Support localization on the date and time picker components (#4517) @alexfauquette
+
+  Texts can be translated in the pickers components, similar to what can be done in the data grid component. Check the [documentation](https://mui.com/x/react-date-pickers/localization/) for more information.
+
+- 📃 Add support for column spanning when exporting to Excel (#4830) @cherniavskii
+
+  <img src="https://user-images.githubusercontent.com/13808724/167691417-bf6baeb9-d409-4134-acb6-aadaf6434de9.png" width="800">
+
+- 🐞 Bugs fixes
+
+### `@mui/x-data-grid@v5.11.1` / `@mui/x-data-grid-pro@v5.11.1` / `@mui/x-data-grid-premium@v5.11.1`
+
+#### Changes
+
+- [DataGrid] Add a CSS class corresponding to current density (#4858) @m4theushw
+- [DataGrid] Execute the pipe-processors in their initialization order (#4913) @flaviendelangle
+- [DataGrid] Fix rendering of the no rows overlay when the `loading` prop is changed (#4910) @m4theushw
+- [DataGridPremium] Add `exceljs` to the dependencies (#4939) @alexfauquette
+- [DataGridPremium] Support column spanning in the Excel export (#4830) @cherniavskii
+- [l10n] Improve Russian (ru-RU) locale (#4864) @arvkonstantin
+
+### `@mui/x-date-pickers@5.0.0-alpha.4` / `@mui/x-date-pickers-pro@5.0.0-alpha.4`
+
+#### Breaking changes
+
+- The props related to the action bar buttons have been removed (`clearable`, `showTodayButton`, `cancelText`, `okText`)
+
+  To decide which button must be displayed and in which order, you can now use the `actions` prop of the `actionBar` component slot props.
+
+   ```jsx
+   <DatePicker
+     componentsProps={{ 
+       actionBar: { 
+         // The actions will be the same between desktop and mobile
+         actions: ['clear'],
+
+         // The actions will be different between desktop and mobile
+         actions: (variant) => variant === 'desktop' ? [] : ['clear'],
+       }
+     }}
+   />
+   ```
+
+  The build-in `ActionBar` component supports 4 different actions: `'clear'`, `'cancel'`, `'accept'`, and `'today'`.
+  By default, the pickers will render the cancel and accept button on mobile and no action on desktop.
+
+  If you need other actions, you can provide your own component to the `ActionBar` component slot
+
+   ```jsx
+   <DatePicker
+     components={{ ActionBar: CustomActionBar }}
+   />
+   ```
+
+#### Changes
+
+- [DatePicker] Fix keyboard accessibility for first and last year (#4807) @alexfauquette
+- [pickers] Add component slot for action bar (#4778) @alexfauquette
+- [pickers] Add l10n support (#4517) @alexfauquette
+- [pickers] Close Popper when pressing <kbd>Esc</kbd> inside a modal (#4499) @alexfauquette
+- [pickers] Support class slots on toolbar components (#4855) @flaviendelangle
+- [TimePicker] Fix time validation when current date is `null` (#4867) @flaviendelangle
+
+### Docs
+
+- [docs] Add 301 redirect for columns page (#4940) @alexfauquette
+- [docs] Avoid confusion with license key installation (#4891) @oliviertassinari
+- [docs] Complete the instructions for pickers installation in readme (#4852) @alexfauquette
+- [docs] Disable ads on paid-only pages (#4842) @flaviendelangle
+- [docs] Don't redirect to localized doc on deploy preview (#4818) @m4theushw
+- [docs] Limit `LICENSE` file to 80 char per line (#4873) @oliviertassinari
+- [docs] Typo on OrderId @oliviertassinari
+- [docs] Update feature comparison table (#4918) @cherniavskii
+
+### Core
+
+- [core] Add new script to generate tree data rows from file tree (#4902) @flaviendelangle
+- [core] Fix code style (#4874) @oliviertassinari
+- [core] Fix React 18 peer dependency (#4908) @oliviertassinari
+- [core] Fix link to the LICENSE file (#4875) @oliviertassinari
+- [core] Fix transitive babel dependency (#4793) @oliviertassinari
+- [core] New pipe processing `rowHydration` (#4896) @flaviendelangle
+- [core] Remove dead code for the docs (#4791) @oliviertassinari
+- [core] Run `yarn prettier` @oliviertassinari
+- [core] Polishes on `CHANGELOG.md` (#4876) @oliviertassinari
+- [core] Simplify rows cache management (#4933) @flaviendelangle
+- [core] Use internal icons for quick filter (#4912) @alexfauquette
+
 ## v5.11.0
 
 _May 13, 2022_
 
 We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 🚀 Premium plan release
-
-  We’re happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)!
-  With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
+- 🚀 **Premium plan release**. We're happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)! With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
 
   This plan is available through the new `@mui/x-data-grid-premium` package, which contains the row grouping and the Excel export features.
 
-  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows.
-  Note that the experimental flag is not required anymore to use the row grouping.
+  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows. Note that the experimental flag is not required anymore to use the row grouping.
 
   ```diff
   -import { DataGridPro } from '@mui/x-data-grid-pro';
@@ -29,16 +119,11 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   For more information about the revised pricing model please have a look at the [blog post](https://mui.com/blog/premium-plan-release/#the-new-licensing-model).
 
-- 👔 Add Excel export
-
-- 🔎 Quick filtering
-
-  You can now add a quick filtering search bar to your grid.
-  To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar.
+- 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-  More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter)
+- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation]( https://mui.com/x/react-data-grid/filtering/#quick-filter).
 
-  ![image](https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png)
+  <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 
 - 🐞 Bugs fixes
 
@@ -46,7 +131,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 #### Breaking changes
 
-- Moving row grouping to premium package
+- Move row grouping to the premium package (#4223) @flaviendelangle
 
   The use of `rowGrouping` in the `@mui/x-data-grid-pro` package is deprecated. The experimental flag will be removed in an upcoming release.
 
@@ -76,7 +161,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 #### Breaking changes
 
-- Rework the auto-closing behavior of the pickers.
+- Rework the auto-closing behavior of the pickers (#4408) @flaviendelangle
 
   The `disableCloseOnSelect` prop has been replaced by a new `closeOnSelect` prop which has the opposite behavior.
   The default behavior remains the same (close after the last step on desktop but not on mobile).

package/LICENSE

@@ -2,9 +2,9 @@ Commercial License
 
 Copyright (c) 2020 Material-UI SAS
 
-MUI X Premium (https://mui.com/pricing/) is commercial software. You must purchase
-a license and agree to the End User License Agreement (EULA: https://mui.com/r/x-license-eula)
-to be able to use the software.
+MUI X Premium (https://mui.com/pricing/) is commercial software.
+You must purchase a license and agree to the End User License Agreement
+(EULA: https://mui.com/r/x-license-eula) to be able to use the software.
 
 Commercial licenses can be obtained at https://mui.com/r/x-get-license?scope=premium.
 You are free to install and try the software without a license key as long as it

package/README.md

@@ -21,8 +21,7 @@ This component has the following peer dependencies that you will need to install
 "peerDependencies": {
   "@mui/material": "^5.2.8",
   "@mui/system": "^5.2.8",
-  "react": "^17.0.2 || ^18.0.0",
-  "react-dom": "^17.0.2 || ^18.0.0"
+  "react": "^17.0.2 || ^18.0.0"
 },
 ```
 

package/hooks/features/export/serializer/excelSerializer.js

@@ -34,9 +34,29 @@ const getFormattedValueOptions = (colDef, valueOptions, api) => {
 const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   const row = {};
   const dataValidation = {};
+  const mergedCells = [];
   const firstCellParams = api.getCellParams(id, columns[0].field);
-  const outlineLevel = firstCellParams.rowNode.depth;
-  columns.forEach(column => {
+  const outlineLevel = firstCellParams.rowNode.depth; // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+
+  api.unstable_calculateColSpan({
+    rowId: id,
+    minFirstColumn: 0,
+    maxLastColumn: columns.length - 1
+  });
+  columns.forEach((column, colIndex) => {
+    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      return;
+    }
+
+    if (colSpanInfo && colSpanInfo.cellProps.colSpan > 1) {
+      mergedCells.push({
+        leftIndex: colIndex + 1,
+        rightIndex: colIndex + colSpanInfo.cellProps.colSpan
+      });
+    }
+
     const cellParams = api.getCellParams(id, column.field);
 
     switch (cellParams.colDef.type) {
@@ -119,7 +139,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   return {
     row,
     dataValidation,
-    outlineLevel
+    outlineLevel,
+    mergedCells
   };
 };
 
@@ -195,7 +216,8 @@ export async function buildExcel(options, api) {
     const {
       row,
       dataValidation,
-      outlineLevel
+      outlineLevel,
+      mergedCells
     } = serializeRow(id, columns, api, defaultValueOptionsFormulae);
     const newRow = worksheet.addRow(row);
     Object.keys(dataValidation).forEach(field => {
@@ -204,7 +226,13 @@ export async function buildExcel(options, api) {
 
     if (outlineLevel) {
       newRow.outlineLevel = outlineLevel;
-    }
+    } // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+
+
+    const lastRowIndex = newRow.worksheet.rowCount;
+    mergedCells.forEach(mergedCell => {
+      worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
+    });
   });
 
   if (exceljsPostProcess) {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.0
+/** @license MUI v5.11.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/hooks/features/export/serializer/excelSerializer.js

@@ -46,9 +46,29 @@ var getFormattedValueOptions = function getFormattedValueOptions(colDef, valueOp
 var serializeRow = function serializeRow(id, columns, api, defaultValueOptionsFormulae) {
   var row = {};
   var dataValidation = {};
+  var mergedCells = [];
   var firstCellParams = api.getCellParams(id, columns[0].field);
-  var outlineLevel = firstCellParams.rowNode.depth;
-  columns.forEach(function (column) {
+  var outlineLevel = firstCellParams.rowNode.depth; // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+
+  api.unstable_calculateColSpan({
+    rowId: id,
+    minFirstColumn: 0,
+    maxLastColumn: columns.length - 1
+  });
+  columns.forEach(function (column, colIndex) {
+    var colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      return;
+    }
+
+    if (colSpanInfo && colSpanInfo.cellProps.colSpan > 1) {
+      mergedCells.push({
+        leftIndex: colIndex + 1,
+        rightIndex: colIndex + colSpanInfo.cellProps.colSpan
+      });
+    }
+
     var cellParams = api.getCellParams(id, column.field);
 
     switch (cellParams.colDef.type) {
@@ -133,7 +153,8 @@ var serializeRow = function serializeRow(id, columns, api, defaultValueOptionsFo
   return {
     row: row,
     dataValidation: dataValidation,
-    outlineLevel: outlineLevel
+    outlineLevel: outlineLevel,
+    mergedCells: mergedCells
   };
 };
 
@@ -223,7 +244,8 @@ function _buildExcel() {
               var _serializeRow = serializeRow(id, columns, api, defaultValueOptionsFormulae),
                   row = _serializeRow.row,
                   dataValidation = _serializeRow.dataValidation,
-                  outlineLevel = _serializeRow.outlineLevel;
+                  outlineLevel = _serializeRow.outlineLevel,
+                  mergedCells = _serializeRow.mergedCells;
 
               var newRow = worksheet.addRow(row);
               Object.keys(dataValidation).forEach(function (field) {
@@ -232,7 +254,13 @@ function _buildExcel() {
 
               if (outlineLevel) {
                 newRow.outlineLevel = outlineLevel;
-              }
+              } // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+
+
+              var lastRowIndex = newRow.worksheet.rowCount;
+              mergedCells.forEach(function (mergedCell) {
+                worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
+              });
             });
 
             if (!exceljsPostProcess) {

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.0
+/** @license MUI v5.11.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/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY1MjM5MjgwMDAwMA==";
+  var releaseInfo = "MTY1Mjk5NzYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/modern/hooks/features/export/serializer/excelSerializer.js

@@ -34,9 +34,29 @@ const getFormattedValueOptions = (colDef, valueOptions, api) => {
 const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   const row = {};
   const dataValidation = {};
+  const mergedCells = [];
   const firstCellParams = api.getCellParams(id, columns[0].field);
-  const outlineLevel = firstCellParams.rowNode.depth;
-  columns.forEach(column => {
+  const outlineLevel = firstCellParams.rowNode.depth; // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+
+  api.unstable_calculateColSpan({
+    rowId: id,
+    minFirstColumn: 0,
+    maxLastColumn: columns.length - 1
+  });
+  columns.forEach((column, colIndex) => {
+    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      return;
+    }
+
+    if (colSpanInfo && colSpanInfo.cellProps.colSpan > 1) {
+      mergedCells.push({
+        leftIndex: colIndex + 1,
+        rightIndex: colIndex + colSpanInfo.cellProps.colSpan
+      });
+    }
+
     const cellParams = api.getCellParams(id, column.field);
 
     switch (cellParams.colDef.type) {
@@ -117,7 +137,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   return {
     row,
     dataValidation,
-    outlineLevel
+    outlineLevel,
+    mergedCells
   };
 };
 
@@ -193,7 +214,8 @@ export async function buildExcel(options, api) {
     const {
       row,
       dataValidation,
-      outlineLevel
+      outlineLevel,
+      mergedCells
     } = serializeRow(id, columns, api, defaultValueOptionsFormulae);
     const newRow = worksheet.addRow(row);
     Object.keys(dataValidation).forEach(field => {
@@ -202,7 +224,13 @@ export async function buildExcel(options, api) {
 
     if (outlineLevel) {
       newRow.outlineLevel = outlineLevel;
-    }
+    } // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+
+
+    const lastRowIndex = newRow.worksheet.rowCount;
+    mergedCells.forEach(mergedCell => {
+      worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
+    });
   });
 
   if (exceljsPostProcess) {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.0
+/** @license MUI v5.11.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/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1MjM5MjgwMDAwMA==";
+  const releaseInfo = "MTY1Mjk5NzYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/hooks/features/export/serializer/excelSerializer.js

@@ -49,9 +49,29 @@ const getFormattedValueOptions = (colDef, valueOptions, api) => {
 const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   const row = {};
   const dataValidation = {};
+  const mergedCells = [];
   const firstCellParams = api.getCellParams(id, columns[0].field);
-  const outlineLevel = firstCellParams.rowNode.depth;
-  columns.forEach(column => {
+  const outlineLevel = firstCellParams.rowNode.depth; // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+
+  api.unstable_calculateColSpan({
+    rowId: id,
+    minFirstColumn: 0,
+    maxLastColumn: columns.length - 1
+  });
+  columns.forEach((column, colIndex) => {
+    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      return;
+    }
+
+    if (colSpanInfo && colSpanInfo.cellProps.colSpan > 1) {
+      mergedCells.push({
+        leftIndex: colIndex + 1,
+        rightIndex: colIndex + colSpanInfo.cellProps.colSpan
+      });
+    }
+
     const cellParams = api.getCellParams(id, column.field);
 
     switch (cellParams.colDef.type) {
@@ -134,7 +154,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   return {
     row,
     dataValidation,
-    outlineLevel
+    outlineLevel,
+    mergedCells
   };
 };
 
@@ -210,7 +231,8 @@ async function buildExcel(options, api) {
     const {
       row,
       dataValidation,
-      outlineLevel
+      outlineLevel,
+      mergedCells
     } = serializeRow(id, columns, api, defaultValueOptionsFormulae);
     const newRow = worksheet.addRow(row);
     Object.keys(dataValidation).forEach(field => {
@@ -219,7 +241,13 @@ async function buildExcel(options, api) {
 
     if (outlineLevel) {
       newRow.outlineLevel = outlineLevel;
-    }
+    } // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+
+
+    const lastRowIndex = newRow.worksheet.rowCount;
+    mergedCells.forEach(mergedCell => {
+      worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
+    });
   });
 
   if (exceljsPostProcess) {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.0
+/** @license MUI v5.11.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/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY1MjM5MjgwMDAwMA==";
+  const releaseInfo = "MTY1Mjk5NzYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "description": "The Premium plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
-  "license": "SEE LICENSE IN LICENSE.txt",
+  "license": "SEE LICENSE IN LICENSE",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
   },
-  "homepage": "https://mui.com/components/data-grid/",
+  "homepage": "https://mui.com/x/react-data-grid/",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -31,25 +31,21 @@
     "directory": "packages/grid/x-data-grid-premium"
   },
   "dependencies": {
-    "@mui/utils": "^5.6.1",
-    "@mui/x-data-grid": "5.11.0",
-    "@mui/x-data-grid-pro": "5.11.0",
-    "@mui/x-license-pro": "5.11.0",
+    "@babel/runtime": "^7.17.2",
+    "@mui/utils": "^5.7.0",
+    "@mui/x-data-grid": "5.11.1",
+    "@mui/x-data-grid-pro": "5.11.1",
+    "@mui/x-license-pro": "5.11.1",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.0.4",
     "prop-types": "^15.8.1",
-    "reselect": "^4.1.5"
+    "reselect": "^4.1.5",
+    "exceljs": "^4.3.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.2.8",
     "@mui/system": "^5.2.8",
-    "exceljs": "^4.3.0",
-    "react": "^17.0.2"
-  },
-  "peerDependenciesMeta": {
-    "exceljs": {
-      "optional": true
-    }
+    "react": "^17.0.2 || ^18.0.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1MjM5MjgwMDAwMA==";
+  const releaseInfo = "MTY1Mjk5NzYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).