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

package/modern/components/cell/GridCell.js

@@ -20,6 +20,7 @@ export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
   PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
   PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
 const EMPTY_CELL_PARAMS = {
@@ -131,10 +132,13 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     classes: rootClasses,
     getCellClassName
   } = rootProps;
-  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+
+  // There is a hidden grid state access in `applyPipeProcessor('cellClassName', ...)`
+  const pipesClassName = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
     id: rowId,
     field
-  });
+  }).filter(Boolean).join(' '));
+  const classNames = [pipesClassName];
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
@@ -330,7 +334,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
   pinnedOffset: PropTypes.number.isRequired,
-  pinnedPosition: PropTypes.oneOf([0, 1, 2]).isRequired,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   sectionIndex: PropTypes.number.isRequired,
   sectionLength: PropTypes.number.isRequired,

package/modern/components/cell/GridSkeletonCell.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "align", "width", "contentWidth"];
+const _excluded = ["field", "align", "width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { fastMemo } from '../../utils/fastMemo';
+import { randomNumberBetween } from '../../utils/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const randomWidth = randomNumberBetween(10000, 20, 80);
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -22,7 +25,7 @@ function GridSkeletonCell(props) {
   const {
       align,
       width,
-      contentWidth
+      height
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
@@ -31,14 +34,18 @@ function GridSkeletonCell(props) {
     align
   };
   const classes = useUtilityClasses(ownerState);
+  const contentWidth = Math.round(randomWidth());
   return /*#__PURE__*/_jsx("div", _extends({
     className: classes.root,
     style: {
-      width
+      height,
+      maxWidth: width,
+      minWidth: width
     }
   }, other, {
     children: /*#__PURE__*/_jsx(Skeleton, {
-      width: `${contentWidth}%`
+      width: `${contentWidth}%`,
+      height: 25
     })
   }));
 }
@@ -48,8 +55,9 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   align: PropTypes.string.isRequired,
-  contentWidth: PropTypes.number.isRequired,
   field: PropTypes.string.isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   width: PropTypes.number.isRequired
 } : void 0;
-export { GridSkeletonCell };
+const Memoized = fastMemo(GridSkeletonCell);
+export { Memoized as GridSkeletonCell };

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -36,7 +36,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   const checkboxElement = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRef = useForkRef(checkboxElement, ref);
-  const element = apiRef.current.getCellElement(id, field);
   const handleChange = event => {
     const params = {
       value: event.target.checked,
@@ -45,10 +44,13 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
   React.useLayoutEffect(() => {
-    if (tabIndex === 0 && element) {
-      element.tabIndex = -1;
+    if (tabIndex === 0) {
+      const element = apiRef.current.getCellElement(id, field);
+      if (element) {
+        element.tabIndex = -1;
+      }
     }
-  }, [element, tabIndex]);
+  }, [apiRef, tabIndex, id, field]);
   React.useEffect(() => {
     if (hasFocus) {
       const input = checkboxElement.current?.querySelector('input');

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -152,7 +152,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: apiRef.current.getLocaleText('columnsManagementNoColumns')
       })]
-    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(FormControlLabel, {

package/modern/components/containers/GridRootStyles.js

@@ -341,7 +341,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnSeparator}`]: {
       visibility: 'hidden',
       position: 'absolute',
-      zIndex: 100,
+      zIndex: 3,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -462,7 +462,8 @@ export const GridRootStyles = styled('div', {
       lineHeight: 'inherit'
     },
     [`& .${c.cellEmpty}`]: {
-      padding: 0
+      padding: 0,
+      height: 'unset'
     },
     [`& .${c.cell}.${c['cell--selectionMode']}`]: {
       cursor: 'default'
@@ -578,6 +579,12 @@ export const GridRootStyles = styled('div', {
       flex: '0 0 auto',
       display: 'inline-block'
     },
+    [`& .${c.cellSkeleton}`]: {
+      flex: '0 0 auto',
+      height: '100%',
+      display: 'inline-flex',
+      alignItems: 'center'
+    },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',
       width: '100%',

package/modern/components/virtualization/GridBottomContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 2,
+  zIndex: 4,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
 });
 export function GridBottomContainer(props) {

package/modern/components/virtualization/GridTopContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 2,
+  zIndex: 4,
   top: 0,
   '&::after': {
     content: '" "',

package/modern/components/virtualization/GridVirtualScroller.js

@@ -85,9 +85,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
-    }, getScrollbarVerticalProps())), /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -7,7 +7,8 @@ import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridOffsetsSelector } from '../../hooks/features/virtualization';
+import { gridRowsMetaSelector } from '../../hooks/features/rows';
+import { gridRenderContextSelector } from '../../hooks/features/virtualization';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,13 +39,17 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const offsetTop = useGridSelector(apiRef, () => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
+  });
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps,
     style: {
-      transform: `translate3d(0, ${offsets.top}px, 0)`
+      transform: `translate3d(0, ${offsetTop}px, 0)`
     }
   }, other));
 });

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,23 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { gridDimensionsSelector } from '../dimensions';
-import { gridOffsetsSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SpaceFiller = styled('div')({
   /* GridRootStyles conflict */
-  '&&': {
+  '&&&': {
     padding: 0,
     width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
   }
@@ -49,14 +50,16 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const theme = useTheme();
   const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
-  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -88,8 +91,8 @@ export const useGridColumnHeaders = props => {
   const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
-    const leftOffsetWidth = offsets.left - leftOverflow;
+    const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -134,4 +134,11 @@ export const gridFilterableColumnLookupSelector = createSelectorMemoized(gridCol
     acc[col.field] = col;
   }
   return acc;
-}, {}));
+}, {}));
+
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export const gridHasColSpanSelector = createSelectorMemoized(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));

package/modern/hooks/features/columns/useGridColumns.js

@@ -44,6 +44,7 @@ export function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.updateRenderContext?.();
     apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
@@ -73,6 +74,7 @@ export function useGridColumns(apiRef, props) {
           keepOnlyColumnsToUpsert: false
         })
       }));
+      apiRef.current.updateRenderContext?.();
       apiRef.current.forceUpdate();
     }
   }, [apiRef]);

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef(null);
+  const focusTimeout = React.useRef();
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
@@ -76,7 +76,6 @@ export const useGridRowEditing = (apiRef, props) => {
     // focus we check if the next cell that received focus is from a different row.
     nextFocusedCell.current = null;
     focusTimeout.current = setTimeout(() => {
-      focusTimeout.current = null;
       if (nextFocusedCell.current?.id !== params.id) {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {

package/modern/hooks/features/filter/useGridFilter.js

@@ -105,7 +105,7 @@ export const useGridFilter = (apiRef, props) => {
     const filterModel = gridFilterModelSelector(apiRef);
     const existingItems = [...filterModel.items];
     items.forEach(item => {
-      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+      const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
       if (itemIndex === -1) {
         existingItems.push(item);
       } else {
@@ -113,7 +113,7 @@ export const useGridFilter = (apiRef, props) => {
       }
     });
     apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items
+      items: existingItems
     }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {

package/modern/hooks/features/rows/useGridRows.js

@@ -260,13 +260,16 @@ export const useGridRows = (apiRef, props) => {
     const dataRowIdToIdLookup = _extends({}, gridRowsDataRowIdToIdLookupSelector(apiRef));
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
+    const seenIds = new Set();
     for (let i = 0; i < newRows.length; i += 1) {
       const rowModel = newRows[i];
       const rowId = getRowIdFromRowModel(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
-      const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
-      delete dataRowIdToModelLookup[replacedRowId];
-      delete dataRowIdToIdLookup[replacedRowId];
-      delete tree[replacedRowId];
+      const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
+      if (!seenIds.has(removedRowId)) {
+        delete dataRowIdToModelLookup[removedRowId];
+        delete dataRowIdToIdLookup[removedRowId];
+        delete tree[removedRowId];
+      }
       const rowTreeNodeConfig = {
         id: rowId,
         depth: 0,
@@ -277,6 +280,7 @@ export const useGridRows = (apiRef, props) => {
       dataRowIdToModelLookup[rowId] = rowModel;
       dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
+      seenIds.add(rowId);
     }
     tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
       children: rootGroupChildren

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -106,14 +106,9 @@ export const useGridRowsMeta = (apiRef, props) => {
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
       }
-      const initialHeights = {};
-      /* eslint-disable-next-line no-restricted-syntax */
-      for (const key in sizes) {
-        if (/^base[A-Z]/.test(key)) {
-          initialHeights[key] = sizes[key];
-        }
-      }
-      initialHeights.baseCenter = baseRowHeight;
+      const initialHeights = {
+        baseCenter: baseRowHeight
+      };
       if (getRowSpacing) {
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
         const spacing = getRowSpacing(_extends({}, row, {
@@ -131,19 +126,16 @@ export const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
-      let maximumBaseSize = 0;
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
       /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
-        if (/^base[A-Z]/.test(key)) {
-          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
-        } else {
+        if (key !== 'baseCenter') {
           otherSizes += value;
         }
       }
-      return acc + maximumBaseSize + otherSizes;
+      return acc + processedSizes.baseCenter + otherSizes;
     }, 0);
     pinnedRows?.top?.forEach(row => {
       calculateRowProcessedSizes(row);

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -28,7 +28,15 @@ const parseSortItem = (sortItem, apiRef) => {
   if (!column || sortItem.sort === null) {
     return null;
   }
-  const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  let comparator;
+  if (column.getSortComparator) {
+    comparator = column.getSortComparator(sortItem.sort);
+  } else {
+    comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  }
+  if (!comparator) {
+    return null;
+  }
   const getSortCellParams = id => ({
     id,
     field: column.field,

package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -24,13 +24,6 @@ export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtua
  */
 export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
 
-/**
- * Get the offsets
- * @category Virtualization
- * @ignore - do not document.
- */
-export const gridOffsetsSelector = createSelector(gridVirtualizationSelector, state => state.offsets);
-
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.