@mui/x-data-grid-pro 6.2.0 → 6.2.1

package/CHANGELOG.md

@@ -3,9 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.2.1
+
+_Apr 20, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add virtualization to row detail panels (#7969) @yaredtsy
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.2.1` / `@mui/x-data-grid-pro@v6.2.1` / `@mui/x-data-grid-premium@v6.2.1`
+
+#### Changes
+
+- [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
+- [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
+- [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw
+- [DataGridPro] Virtualize row detail panels (#7969) @yaredtsy
+
+### `@mui/x-date-pickers@v6.2.1` / `@mui/x-date-pickers-pro@v6.2.1`
+
+#### Changes
+
+- [pickers] Do not include the time in date components when going to today (#8657) @flaviendelangle
+- [pickers] Sync internal state with controlled value (#8674) @alexfauquette
+
+### `@mui/x-codemod@v6.0.6`
+
+#### Changes
+
+- [codemod] Avoid filter failures on object prototype properties (#8647) @LukasTy
+
+### Docs
+
+- [docs] Add no-op service worker to fix stale cache issue (#8598) @cherniavskii
+- [docs] Clarify what `AdapterDayjs` is in the Getting Started page (#8219) @flaviendelangle
+- [docs] Fix typo on picker page description (#8611) @maxolasersquad
+- [docs] Improve section title in Getting Started page (#8648) @flaviendelangle
+- [docs] Inform about input format modification (#8458) @alexfauquette
+
+### Core
+
+- [core] Fix release date (#8618) @flaviendelangle
+- [core] Upgrade monorepo (#8668) @MBilalShafi
+- [charts] Support Tooltip (#8356) @alexfauquette
+
 ## 6.2.0
 
-_Apr 13, 2023_
+_Apr 14, 2023_
 
 We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
 

package/components/DataGridProVirtualScroller.js

@@ -229,40 +229,41 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const getDetailPanels = () => {
-    const panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = {};
+    expandedRowIds.forEach(id => {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  const getDetailPanel = rowId => {
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
-    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      const id = uniqueExpandedRowIds[i];
-      const content = detailPanelsContent[id];
+    const content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      const exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        const spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
-          rowId: id,
-          style: {
-            top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    const exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      const spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/_jsx(GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  const detailPanels = getDetailPanels();
+  const detailPanels = [];
   const topPinnedRows = getRows({
     renderContext,
     rows: topPinnedRowsData,
@@ -272,7 +273,19 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const mainRows = getRows({
     renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: rowId => {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      const detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   const bottomPinnedRows = getRows({
     renderContext,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.2.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/components/DataGridProVirtualScroller.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -237,40 +236,41 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  var getDetailPanels = function getDetailPanels() {
-    var panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  var expandedRowIdsLookup = React.useMemo(function () {
+    var lookup = {};
+    expandedRowIds.forEach(function (id) {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  var getDetailPanel = function getDetailPanel(rowId) {
     var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    var uniqueExpandedRowIds = Array.from(new Set(_toConsumableArray(expandedRowIds)).values());
-    for (var i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      var id = uniqueExpandedRowIds[i];
-      var content = detailPanelsContent[id];
+    var content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      var exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        var hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        var height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        var sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
-        var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
-          rowId: id,
-          style: {
-            top: top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    var exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      var hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      var height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
+      var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/_jsx(GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top: top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  var detailPanels = getDetailPanels();
+  var detailPanels = [];
   var topPinnedRows = getRows({
     renderContext: renderContext,
     rows: topPinnedRowsData,
@@ -280,7 +280,19 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var mainRows = getRows({
     renderContext: renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: function onRowRender(rowId) {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      var detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   var bottomPinnedRows = getRows({
     renderContext: renderContext,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.2.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/utils/releaseInfo.js

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

package/modern/components/DataGridProVirtualScroller.js

@@ -226,40 +226,41 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const getDetailPanels = () => {
-    const panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = {};
+    expandedRowIds.forEach(id => {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  const getDetailPanel = rowId => {
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
-    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      const id = uniqueExpandedRowIds[i];
-      const content = detailPanelsContent[id];
+    const content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      const exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        const spacingTop = sizes?.spacingTop || 0;
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
-          rowId: id,
-          style: {
-            top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    const exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      const spacingTop = sizes?.spacingTop || 0;
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/_jsx(GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  const detailPanels = getDetailPanels();
+  const detailPanels = [];
   const topPinnedRows = getRows({
     renderContext,
     rows: topPinnedRowsData,
@@ -269,7 +270,19 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const mainRows = getRows({
     renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: rowId => {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      const detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   const bottomPinnedRows = getRows({
     renderContext,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.2.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

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

package/node/components/DataGridProVirtualScroller.js

@@ -235,40 +235,41 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const getDetailPanels = () => {
-    const panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = {};
+    expandedRowIds.forEach(id => {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  const getDetailPanel = rowId => {
     const rowsMeta = (0, _xDataGrid.gridRowsMetaSelector)(apiRef.current.state);
-    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
-    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      const id = uniqueExpandedRowIds[i];
-      const content = detailPanelsContent[id];
+    const content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      const exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        const spacingTop = sizes?.spacingTop || 0;
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanel.GridDetailPanel, {
-          rowId: id,
-          style: {
-            top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    const exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      const spacingTop = sizes?.spacingTop || 0;
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanel.GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  const detailPanels = getDetailPanels();
+  const detailPanels = [];
   const topPinnedRows = getRows({
     renderContext,
     rows: topPinnedRowsData,
@@ -278,7 +279,19 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const mainRows = getRows({
     renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: rowId => {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      const detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   const bottomPinnedRows = getRows({
     renderContext,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.2.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTQyMzIwMDAwMA==";
+  const releaseInfo = "MTY4MTkzMDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.21.0",
     "@mui/utils": "^5.11.13",
-    "@mui/x-data-grid": "6.2.0",
+    "@mui/x-data-grid": "6.2.1",
     "@mui/x-license-pro": "6.0.4",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",

package/utils/releaseInfo.js

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