@mui/x-data-grid 5.12.1 → 5.12.2

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIndexFromScroll = getIndexFromScroll;
+exports.binarySearch = binarySearch;
 exports.useGridVirtualScroller = exports.getRenderableIndexes = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -53,7 +53,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // Uses binary search to avoid looping through all possible positions
-function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
+function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
   }
@@ -64,7 +64,18 @@ function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positi
 
   const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
   const itemOffset = positions[pivot];
-  return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
+  return offset <= itemOffset ? binarySearch(offset, positions, sliceStart, pivot) : binarySearch(offset, positions, pivot + 1, sliceEnd);
+}
+
+function exponentialSearch(offset, positions, index) {
+  let interval = 1;
+
+  while (index < positions.length && positions[index] < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return binarySearch(offset, positions, Math.floor(index / 2), Math.min(index, positions.length));
 }
 
 const getRenderableIndexes = ({
@@ -111,6 +122,22 @@ const useGridVirtualScroller = props => {
   });
   const [containerWidth, setContainerWidth] = React.useState(null);
   const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const getNearestIndexToRender = React.useCallback(offset => {
+    const lastMeasuredIndex = Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex());
+    const allRowsMeasured = lastMeasuredIndex === Infinity;
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+      // If all rows were measured (when no row has "auto" as height) or all rows before the offset
+      // were measured, then use a binary search because it's faster.
+      return binarySearch(offset, rowsMeta.positions);
+    } // Otherwise, use an exponential search.
+    // If rows have "auto" as height, their positions will be based on estimated heights.
+    // In this case, we can skip several steps until we find a position higher than the offset.
+    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+  }, [apiRef, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
       return {
@@ -124,9 +151,11 @@ const useGridVirtualScroller = props => {
     const {
       top,
       left
-    } = scrollPosition.current;
-    const firstRowIndex = Math.min(Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex()), getIndexFromScroll(top, rowsMeta.positions));
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
+    } = scrollPosition.current; // Clamp the value because the search may return an index out of bounds.
+    // In the last index, this is not needed because Array.slice doesn't include it.
+
+    const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
     let hasRowWithAutoHeight = false;
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
@@ -144,8 +173,8 @@ const useGridVirtualScroller = props => {
     }
 
     if (!hasRowWithAutoHeight) {
-      firstColumnIndex = getIndexFromScroll(left, columnPositions);
-      lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+      firstColumnIndex = binarySearch(left, columnPositions);
+      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
     }
 
     return {
@@ -154,7 +183,7 @@ const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
   React.useEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -412,6 +441,10 @@ const useGridVirtualScroller = props => {
     rootStyle.overflowX = 'hidden';
   }
 
+  if (rootProps.autoHeight) {
+    rootStyle.overflowY = 'hidden';
+  }
+
   const getRenderContext = React.useCallback(() => {
     return prevRenderContext.current;
   }, []);

package/node/index.js

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

package/node/locales/arSD.js

@@ -116,6 +116,7 @@ const arSDGrid = {
   groupColumn: name => `تجميع حسب ${name}`,
   unGroupColumn: name => `إيقاف التجميع حسب ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'توسيع',
   collapseDetailPanel: 'طوي' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/bgBG.js

@@ -116,6 +116,7 @@ const bgBGGrid = {
   groupColumn: name => `Групирай по ${name}`,
   unGroupColumn: name => `Спри групиране по ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Разгъване',
   collapseDetailPanel: 'Свиване' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/csCZ.js

@@ -150,6 +150,7 @@ const csCZGrid = {
   groupingColumnHeaderName: 'Skupina',
   groupColumn: name => `Zoskupit podle ${name}`,
   unGroupColumn: name => `Přestat zoskupovat podle ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/daDK.js

@@ -116,6 +116,7 @@ const daDKGrid = {
   groupColumn: name => `Gruppér efter ${name}`,
   unGroupColumn: name => `Fjern gruppéring efter ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Udvid',
   collapseDetailPanel: 'Kollaps' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/deDE.js

@@ -116,6 +116,7 @@ const deDEGrid = {
   groupColumn: name => `Gruppieren nach ${name}`,
   unGroupColumn: name => `Gruppierung nach ${name} aufheben`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Aufklappen',
   collapseDetailPanel: 'Zuklappen',
   // Row reordering text

package/node/locales/elGR.js

@@ -113,6 +113,7 @@ const elGRGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/esES.js

@@ -115,6 +115,7 @@ const esESGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/faIR.js

@@ -116,6 +116,7 @@ const faIRGrid = {
   groupColumn: name => `گروه‌بندی براساس ${name}`,
   unGroupColumn: name => `لغو گروه‌بندی براساس ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'بازکردن پنل جزئیات',
   collapseDetailPanel: 'بستن پنل جزئیات' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/fiFI.js

@@ -115,6 +115,7 @@ const fiFIGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/frFR.js

@@ -115,6 +115,7 @@ const frFRGrid = {
   groupingColumnHeaderName: 'Groupe',
   groupColumn: name => `Grouper par ${name}`,
   unGroupColumn: name => `Arrêter de grouper par ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/heIL.js

@@ -116,6 +116,7 @@ const heILGrid = {
   groupColumn: name => `קבץ לפי ${name}`,
   unGroupColumn: name => `הפסק לקבץ לפי ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'הרחב',
   collapseDetailPanel: 'כווץ',
   // Row reordering text

package/node/locales/huHU.js

@@ -116,6 +116,7 @@ const huHUGrid = {
   groupColumn: name => `Csoportosítás ${name} szerint`,
   unGroupColumn: name => `${name} szerinti csoportosítás törlése`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Kibontás',
   collapseDetailPanel: 'Összecsukás' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/itIT.js

@@ -115,6 +115,7 @@ const itITGrid = {
   groupingColumnHeaderName: 'Gruppo',
   groupColumn: name => `Raggruppa per ${name}`,
   unGroupColumn: name => `Annulla raggruppamento per ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/jaJP.js

@@ -116,6 +116,7 @@ const jaJPGrid = {
   groupColumn: name => `${name}でグループ化`,
   unGroupColumn: name => `${name}のグループを解除`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: '展開',
   collapseDetailPanel: '折りたたみ',
   // Row reordering text

package/node/locales/koKR.js

@@ -115,6 +115,7 @@ const koKRGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/nbNO.js

@@ -116,6 +116,7 @@ const nbNOGrid = {
   groupColumn: name => `Grupper på ${name}`,
   unGroupColumn: name => `Stopp å grupper på ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Utvid',
   collapseDetailPanel: 'Kollaps',
   // Row reordering text

package/node/locales/nlNL.js

@@ -115,6 +115,7 @@ const nlNLGrid = {
   groupingColumnHeaderName: 'Groep',
   groupColumn: name => `Groepeer op ${name}`,
   unGroupColumn: name => `Stop groeperen op ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/plPL.js

@@ -116,6 +116,7 @@ const plPLGrid = {
   groupColumn: name => `Grupuj według ${name}`,
   unGroupColumn: name => `Rozgrupuj ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/ptBR.js

@@ -116,6 +116,7 @@ const ptBRGrid = {
   groupColumn: name => `Agrupar por ${name}`,
   unGroupColumn: name => `Parar agrupamento por ${name}`,
   // Master/detail
+  detailPanelToggle: 'Painel de detalhes',
   expandDetailPanel: 'Expandir',
   collapseDetailPanel: 'Esconder' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/ruRU.js

@@ -149,6 +149,7 @@ const ruRUGrid = {
   groupColumn: name => `Сгруппировать по ${name}`,
   unGroupColumn: name => `Разгруппировать по ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Развернуть',
   collapseDetailPanel: 'Свернуть' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/skSK.js

@@ -150,6 +150,7 @@ const skSKGrid = {
   groupingColumnHeaderName: 'Skupina',
   groupColumn: name => `Zoskupiť podľa ${name}`,
   unGroupColumn: name => `Prestať zoskupovať podľa ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/trTR.js

@@ -116,6 +116,7 @@ const trTRGrid = {
   groupColumn: name => `${name} için grupla`,
   unGroupColumn: name => `${name} için gruplamayı kaldır`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Genişlet',
   collapseDetailPanel: 'Gizle' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/node/locales/ukUA.js

@@ -140,6 +140,7 @@ const ukUAGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/viVN.js

@@ -115,6 +115,7 @@ const viVNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/locales/zhCN.js

@@ -115,6 +115,7 @@ const zhCNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.12.1",
+  "version": "5.12.2",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",