@mui/x-data-grid 7.0.0-beta.5 → 7.0.0-beta.6

package/node/components/cell/GridCell.js

@@ -21,7 +21,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -83,7 +83,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -212,8 +211,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
     const cellStyle = (0, _extends2.default)({
-      '--width': `${width}px`,
-      '--height': typeof height === 'number' ? `${height}px` : height
+      '--width': `${width}px`
     }, styleProp);
     if (pinnedPosition === PinnedPosition.LEFT) {
       cellStyle.left = pinnedOffset;
@@ -222,7 +220,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       cellStyle.right = pinnedOffset;
     }
     return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
@@ -332,8 +330,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
-  gridHasScrollX: _propTypes.default.bool.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,

package/node/components/containers/GridRootStyles.js

@@ -448,8 +448,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
-      '--width': '0px',
-      '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
       overflow: 'hidden',

package/node/components/virtualization/GridVirtualScroller.js

@@ -67,8 +67,10 @@ function GridVirtualScroller(props) {
     getContentProps,
     getRenderZoneProps,
     getScrollbarVerticalProps,
-    getScrollbarHorizontalProps
+    getScrollbarHorizontalProps,
+    getRows
   } = virtualScroller;
+  const rows = getRows();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
@@ -83,11 +85,11 @@ function GridVirtualScroller(props) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
-          children: [virtualScroller.getRows(), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
+          children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
+      })), rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller

package/node/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -41,7 +41,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
 const useGridPipeProcessing = apiRef => {
-  const processorsCache = React.useRef({});
+  const cache = React.useRef({});
   const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
     if (isRunning.current || !groupCache) {
@@ -54,52 +54,54 @@ const useGridPipeProcessing = apiRef => {
     isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    const groupCache = processorsCache.current[group];
+    const groupCache = cache.current[group];
     const oldProcessor = groupCache.processors.get(id);
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
+      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values());
       runAppliers(groupCache);
     }
     return () => {
-      processorsCache.current[group].processors.set(id, null);
+      cache.current[group].processors.delete(id);
+      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values());
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    processorsCache.current[group].appliers[id] = applier;
+    cache.current[group].appliers[id] = applier;
     return () => {
-      const _appliers = processorsCache.current[group].appliers,
+      const _appliers = cache.current[group].appliers,
         otherAppliers = (0, _objectWithoutPropertiesLoose2.default)(_appliers, [id].map(_toPropertyKey2.default));
-      processorsCache.current[group].appliers = otherAppliers;
+      cache.current[group].appliers = otherAppliers;
     };
   }, []);
   const requestPipeProcessorsApplication = React.useCallback(group => {
-    const groupCache = processorsCache.current[group];
-    runAppliers(groupCache);
+    runAppliers(cache.current[group]);
   }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
-    if (!processorsCache.current[group]) {
+    if (!cache.current[group]) {
       return value;
     }
-    const preProcessors = Array.from(processorsCache.current[group].processors.values());
-    return preProcessors.reduce((acc, preProcessor) => {
-      if (!preProcessor) {
-        return acc;
-      }
-      return preProcessor(acc, context);
-    }, value);
+    const processors = cache.current[group].processorsAsArray;
+    let result = value;
+    for (let i = 0; i < processors.length; i += 1) {
+      result = processors[i](result, context);
+    }
+    return result;
   }, []);
   const preProcessingPrivateApi = {
     registerPipeProcessor,

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -238,6 +238,7 @@ function useGridDimensions(apiRef, props) {
     set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
     set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
     set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+    set('--height', `${dimensions.rowHeight}px`);
   }, [root, dimensions]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {

package/node/hooks/features/rows/useGridParamsApi.js

@@ -41,12 +41,13 @@ function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    const value = apiRef.current.getCellValue(id, field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
+    const rawValue = row[field];
+    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
     const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
     const params = {
@@ -70,19 +71,14 @@ function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (!colDef || !colDef.valueGetter) {
-      const rowModel = apiRef.current.getRow(id);
-      if (!rowModel) {
-        throw new MissingRowIdError(`No row with id #${id} found`);
-      }
-      return rowModel[field];
-    }
     const row = apiRef.current.getRow(id);
     if (!row) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, row, colDef, apiRef);
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
   }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
     const field = colDef.field;

package/node/hooks/features/sorting/useGridSorting.js

@@ -50,7 +50,7 @@ const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if (!sortItem) {
+      if (sortItem?.sort == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -126,7 +126,7 @@ const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = !sortItem ? [] : [sortItem];
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }

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

@@ -284,6 +284,11 @@ const useGridVirtualScroller = () => {
       if (panel) {
         rows.push(panel);
       }
+      if (isLastVisible) {
+        rows.push(apiRef.current.getInfiniteLoadingTriggerElement?.({
+          lastRowId: id
+        }));
+      }
     });
     return rows;
   };

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.5
+ * @mui/x-data-grid v7.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -80,7 +80,6 @@ var _exportNames = {
   defaultGetRowsToExport: true,
   createSelector: true,
   createSelectorMemoized: true,
-  unstable_resetCreateSelectorCache: true,
   findParentElementFromClassName: true,
   getActiveElement: true,
   isEventTargetInPortal: true,
@@ -391,12 +390,6 @@ Object.defineProperty(exports, "sortingStateInitializer", {
     return _useGridSorting.sortingStateInitializer;
   }
 });
-Object.defineProperty(exports, "unstable_resetCreateSelectorCache", {
-  enumerable: true,
-  get: function () {
-    return _createSelector.unstable_resetCreateSelectorCache;
-  }
-});
 Object.defineProperty(exports, "unwrapPrivateAPI", {
   enumerable: true,
   get: function () {

package/node/models/api/gridInfiniteLoaderApi.js

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

package/node/utils/createSelector.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unstable_resetCreateSelectorCache = exports.createSelectorMemoized = exports.createSelector = void 0;
+exports.createSelectorMemoized = exports.createSelector = void 0;
 var _reselect = require("reselect");
 var _warning = require("./warning");
-const cacheContainer = {
-  cache: new WeakMap()
-};
+const cache = new WeakMap();
 const missingInstanceIdWarning = (0, _warning.buildWarning)(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -82,8 +80,7 @@ const createSelector = (a, b, c, d, e, f, ...rest) => {
 };
 exports.createSelector = createSelector;
 const createSelectorMemoized = (...args) => {
-  const selector = (...selectorArgs) => {
-    const [stateOrApiRef, instanceId] = selectorArgs;
+  const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
     const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
@@ -92,20 +89,20 @@ const createSelectorMemoized = (...args) => {
         missingInstanceIdWarning();
       }
     }
-    const {
-      cache
-    } = cacheContainer;
-    if (cache.get(cacheKey) && cache.get(cacheKey)?.get(args)) {
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);
+    if (cacheArgs && cacheFn) {
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
-      return cache.get(cacheKey)?.get(args)(state, cacheKey);
+      return cacheFn(state, cacheKey);
     }
-    const newSelector = (0, _reselect.createSelector)(...args);
-    if (!cache.get(cacheKey)) {
-      cache.set(cacheKey, new Map());
+    const fn = (0, _reselect.createSelector)(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
     }
-    cache.get(cacheKey)?.set(args, newSelector);
-    return newSelector(state, cacheKey);
+    cacheArgs.set(args, fn);
+    return fn(state, cacheKey);
   };
 
   // We use this property to detect if the selector was created with createSelector
@@ -113,10 +110,4 @@ const createSelectorMemoized = (...args) => {
   selector.acceptsApiRef = true;
   return selector;
 };
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.createSelectorMemoized = createSelectorMemoized;
-const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = new WeakMap();
-};
-exports.unstable_resetCreateSelectorCache = unstable_resetCreateSelectorCache;
+exports.createSelectorMemoized = createSelectorMemoized;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.6",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.0",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "clsx": "^2.1.0",

package/utils/createSelector.d.ts

@@ -20,5 +20,4 @@ type SelectorArgs<Selectors extends ReadonlyArray<Selector<any>>, Result> = [sel
 type CreateSelectorFunction = <Selectors extends ReadonlyArray<Selector<any>>, Result>(...items: SelectorArgs<Selectors, Result>) => OutputSelector<StateFromSelectorList<Selectors>, Result>;
 export declare const createSelector: CreateSelectorFunction;
 export declare const createSelectorMemoized: CreateSelectorFunction;
-export declare const unstable_resetCreateSelectorCache: () => void;
 export {};

package/utils/createSelector.js

@@ -1,8 +1,6 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
-const cacheContainer = {
-  cache: new WeakMap()
-};
+const cache = new WeakMap();
 const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -75,9 +73,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   return selector;
 };
 export const createSelectorMemoized = (...args) => {
-  const selector = (...selectorArgs) => {
-    var _cache$get, _cache$get3;
-    const [stateOrApiRef, instanceId] = selectorArgs;
+  const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
     const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId != null ? instanceId : DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
@@ -86,30 +82,24 @@ export const createSelectorMemoized = (...args) => {
         missingInstanceIdWarning();
       }
     }
-    const {
-      cache
-    } = cacheContainer;
-    if (cache.get(cacheKey) && (_cache$get = cache.get(cacheKey)) != null && _cache$get.get(args)) {
-      var _cache$get2;
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit != null ? cacheArgsInit : new Map();
+    const cacheFn = cacheArgs == null ? void 0 : cacheArgs.get(args);
+    if (cacheArgs && cacheFn) {
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
-      return (_cache$get2 = cache.get(cacheKey)) == null ? void 0 : _cache$get2.get(args)(state, cacheKey);
+      return cacheFn(state, cacheKey);
     }
-    const newSelector = reselectCreateSelector(...args);
-    if (!cache.get(cacheKey)) {
-      cache.set(cacheKey, new Map());
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
     }
-    (_cache$get3 = cache.get(cacheKey)) == null || _cache$get3.set(args, newSelector);
-    return newSelector(state, cacheKey);
+    cacheArgs.set(args, fn);
+    return fn(state, cacheKey);
   };
 
   // We use this property to detect if the selector was created with createSelector
   // or it's only a simple function the receives the state and returns part of it.
   selector.acceptsApiRef = true;
   return selector;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = new WeakMap();
 };