@mui/x-data-grid-pro 5.15.2 → 5.17.0

package/node/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridLazyLoader = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _useGridVirtualScroller = require("@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+function findSkeletonRowsSection(visibleRows, range) {
+  let {
+    firstRowIndex,
+    lastRowIndex
+  } = range;
+  const visibleRowsSection = visibleRows.slice(range.firstRowIndex, range.lastRowIndex);
+  let startIndex = 0;
+  let endIndex = visibleRowsSection.length - 1;
+  let isSkeletonSectionFound = false;
+
+  while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
+    if (!visibleRowsSection[startIndex].model && !visibleRowsSection[endIndex].model) {
+      isSkeletonSectionFound = true;
+    }
+
+    if (visibleRowsSection[startIndex].model) {
+      startIndex += 1;
+      firstRowIndex += 1;
+    }
+
+    if (visibleRowsSection[endIndex].model) {
+      endIndex -= 1;
+      lastRowIndex -= 1;
+    }
+  }
+
+  return isSkeletonSectionFound ? {
+    firstRowIndex,
+    lastRowIndex
+  } : undefined;
+}
+
+function isLazyLoadingDisabled({
+  lazyLoadingFeatureFlag,
+  rowsLoadingMode,
+  gridDimensions
+}) {
+  if (!lazyLoadingFeatureFlag || !gridDimensions) {
+    return true;
+  }
+
+  if (rowsLoadingMode !== _xDataGrid.GridFeatureModeConstant.server) {
+    return true;
+  }
+
+  return false;
+}
+/**
+ * @requires useGridRows (state)
+ * @requires useGridPagination (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+
+
+const useGridLazyLoader = (apiRef, props) => {
+  var _props$experimentalFe;
+
+  const visibleRows = (0, _internals.useGridVisibleRows)(apiRef, props);
+  const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
+  const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
+  const renderedRowsIntervalCache = React.useRef({
+    firstRowToRender: 0,
+    lastRowToRender: 0
+  });
+  const {
+    lazyLoading
+  } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
+  const getCurrentIntervalToRender = React.useCallback(() => {
+    const currentRenderContext = apiRef.current.unstable_getRenderContext();
+    const [firstRowToRender, lastRowToRender] = (0, _useGridVirtualScroller.getRenderableIndexes)({
+      firstIndex: currentRenderContext.firstRowIndex,
+      lastIndex: currentRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: visibleRows.rows.length,
+      buffer: props.rowBuffer
+    });
+    return {
+      firstRowToRender,
+      lastRowToRender
+    };
+  }, [apiRef, props.rowBuffer, visibleRows.rows.length]);
+  const handleRenderedRowsIntervalChange = React.useCallback(params => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    const fetchRowsParams = {
+      firstRowToRender: params.firstRowToRender,
+      lastRowToRender: params.lastRowToRender,
+      sortModel,
+      filterModel
+    };
+
+    if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowToRender && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowToRender) {
+      return;
+    }
+
+    if (sortModel.length === 0 && filterModel.items.length === 0) {
+      const skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
+        firstRowIndex: params.firstRowToRender,
+        lastRowIndex: params.lastRowToRender
+      });
+
+      if (!skeletonRowsSection) {
+        return;
+      }
+
+      fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
+      fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
+    }
+
+    renderedRowsIntervalCache.current = params;
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading]);
+  const handleGridSortModelChange = React.useCallback(newSortModel => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+    const {
+      firstRowToRender,
+      lastRowToRender
+    } = getCurrentIntervalToRender();
+    const fetchRowsParams = {
+      firstRowToRender,
+      lastRowToRender,
+      sortModel: newSortModel,
+      filterModel
+    };
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, filterModel, lazyLoading, getCurrentIntervalToRender]);
+  const handleGridFilterModelChange = React.useCallback(newFilterModel => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+    const {
+      firstRowToRender,
+      lastRowToRender
+    } = getCurrentIntervalToRender();
+    const fetchRowsParams = {
+      firstRowToRender,
+      lastRowToRender,
+      sortModel,
+      filterModel: newFilterModel
+    };
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, sortModel, lazyLoading, getCurrentIntervalToRender]);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortModelChange', handleGridSortModelChange);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'filterModelChange', handleGridFilterModelChange);
+  (0, _xDataGrid.useGridApiOptionHandler)(apiRef, 'fetchRows', props.onFetchRows);
+};
+
+exports.useGridLazyLoader = useGridLazyLoader;

package/node/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridLazyLoaderPreProcessors = exports.GRID_SKELETON_ROW_ROOT_ID = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+const GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
+exports.GRID_SKELETON_ROW_ROOT_ID = GRID_SKELETON_ROW_ROOT_ID;
+
+const getSkeletonRowId = index => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`;
+
+const useGridLazyLoaderPreProcessors = (apiRef, props) => {
+  var _props$experimentalFe;
+
+  const {
+    lazyLoading
+  } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
+  const addSkeletonRows = React.useCallback(groupingParams => {
+    if (!lazyLoading || props.rowsLoadingMode !== _xDataGrid.GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+      return groupingParams;
+    }
+
+    const newRowsIds = [...groupingParams.ids];
+
+    for (let i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+      const skeletonId = getSkeletonRowId(i);
+      newRowsIds.push(skeletonId);
+    }
+
+    return (0, _extends2.default)({}, groupingParams, {
+      ids: newRowsIds
+    });
+  }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateRows', addSkeletonRows);
+};
+
+exports.useGridLazyLoaderPreProcessors = useGridLazyLoaderPreProcessors;

package/node/hooks/features/treeData/gridTreeDataUtils.js

@@ -41,7 +41,7 @@ const filterRowTreeFromTreeData = params => {
         passingFilterItems,
         passingQuickFilterValues
       } = isRowMatchingFilters(node.id);
-      isMatchingFilters = (0, _internals.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+      isMatchingFilters = (0, _internals.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel, params.apiRef);
     }
 
     let filteredDescendantCount = 0;

package/node/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -124,7 +124,8 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
       rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
       disableChildrenFiltering: props.disableChildrenFiltering,
-      filterModel: params.filterModel
+      filterModel: params.filterModel,
+      apiRef
     });
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {

package/node/index.js

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

package/node/models/gridFetchRowsParams.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/models/index.js

@@ -41,4 +41,17 @@ Object.keys(_gridRowOrderChangeParams).forEach(function (key) {
       return _gridRowOrderChangeParams[key];
     }
   });
+});
+
+var _gridFetchRowsParams = require("./gridFetchRowsParams");
+
+Object.keys(_gridFetchRowsParams).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridFetchRowsParams[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridFetchRowsParams[key];
+    }
+  });
 });

package/node/utils/domUtils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findGridCellElementsFromCol = findGridCellElementsFromCol;
+exports.findGroupHeaderElementsFromField = findGroupHeaderElementsFromField;
 exports.findHeaderElementFromField = findHeaderElementFromField;
 exports.getFieldFromHeaderElem = getFieldFromHeaderElem;
 
@@ -19,6 +20,12 @@ function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 
+function findGroupHeaderElementsFromField(elem, field) {
+  var _elem$querySelectorAl;
+
+  return Array.from((_elem$querySelectorAl = elem.querySelectorAll(`[data-fields*="|-${field}-|"]`)) != null ? _elem$querySelectorAl : []);
+}
+
 function findGridCellElementsFromCol(col, api) {
   const root = (0, _internals.findParentElementFromClassName)(col, 'MuiDataGrid-root');
 

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY2MDE2NTIwMDAwMA==";
+  const releaseInfo = "MTY2MjA2NjAwMDAwMA==";
 
   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,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "5.15.2",
+  "version": "5.17.0",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -31,10 +31,10 @@
     "directory": "packages/grid/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@mui/utils": "^5.4.1",
-    "@mui/x-data-grid": "5.15.2",
-    "@mui/x-license-pro": "5.15.0",
+    "@babel/runtime": "^7.18.9",
+    "@mui/utils": "^5.9.3",
+    "@mui/x-data-grid": "5.17.0",
+    "@mui/x-license-pro": "5.17.0",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",

package/typeOverloads/modules.d.ts

@@ -1,5 +1,5 @@
 import { GridRowId } from '@mui/x-data-grid';
-import type { GridRowScrollEndParams, GridRowOrderChangeParams } from '../models';
+import type { GridRowScrollEndParams, GridRowOrderChangeParams, GridFetchRowsParams } from '../models';
 import type { GridColumnPinningInternalCache, GridPinnedColumns } from '../hooks/features/columnPinning/gridColumnPinningInterface';
 import type { GridCanBeReorderedPreProcessingContext } from '../hooks/features/columnReorder/columnReorderInterfaces';
 import { GridRowPinningInternalCache } from '../hooks/features/rowPinning/gridRowPinningInterface';
@@ -32,6 +32,12 @@ export interface GridEventLookupPro {
     rowOrderChange: {
         params: GridRowOrderChangeParams;
     };
+    /**
+     * Fired when a new batch of rows is requested to be loaded. Called with a [[GridFetchRowsParams]] object.
+     */
+    fetchRows: {
+        params: GridFetchRowsParams;
+    };
 }
 export interface GridPipeProcessingLookupPro {
     canBeReordered: {

package/utils/domUtils.d.ts

@@ -1,4 +1,5 @@
 import { GridApiPro } from '../models/gridApiPro';
 export declare function getFieldFromHeaderElem(colCellEl: Element): string;
 export declare function findHeaderElementFromField(elem: Element, field: string): Element | null;
+export declare function findGroupHeaderElementsFromField(elem: Element, field: string): Element[];
 export declare function findGridCellElementsFromCol(col: HTMLElement, api: GridApiPro): Element[];

package/utils/domUtils.js

@@ -6,6 +6,11 @@ export function getFieldFromHeaderElem(colCellEl) {
 export function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
+export function findGroupHeaderElementsFromField(elem, field) {
+  var _elem$querySelectorAl;
+
+  return Array.from((_elem$querySelectorAl = elem.querySelectorAll(`[data-fields*="|-${field}-|"]`)) != null ? _elem$querySelectorAl : []);
+}
 export function findGridCellElementsFromCol(col, api) {
   const root = findParentElementFromClassName(col, 'MuiDataGrid-root');
 

package/utils/releaseInfo.js

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