@mui/x-data-grid 7.8.0 → 7.10.0

package/modern/components/cell/GridSkeletonCell.js

@@ -1,52 +1,88 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "align", "width", "height"];
+const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
 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 clsx from 'clsx';
 import { fastMemo } from '../../utils/fastMemo';
-import { randomNumberBetween } from '../../utils/utils';
+import { createRandomNumberGenerator } 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 CIRCULAR_CONTENT_SIZE = '1.3em';
+const CONTENT_HEIGHT = '1.2em';
+const DEFAULT_CONTENT_WIDTH_RANGE = [40, 80];
+const CONTENT_WIDTH_RANGE_BY_TYPE = {
+  number: [40, 60],
+  string: [40, 80],
+  date: [40, 60],
+  dateTime: [60, 80],
+  singleSelect: [40, 80]
+};
 const useUtilityClasses = ownerState => {
   const {
     align,
-    classes
+    classes,
+    empty
   } = ownerState;
   const slots = {
-    root: ['cell', 'cellSkeleton', `cell--text${capitalize(align)}`, 'withBorderColor']
+    root: ['cell', 'cellSkeleton', `cell--text${align ? capitalize(align) : 'Left'}`, empty && 'cellEmpty']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const randomNumberGenerator = createRandomNumberGenerator(12345);
 function GridSkeletonCell(props) {
   const {
+      field,
+      type,
       align,
       width,
-      height
+      height,
+      empty = false,
+      style,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes,
-    align
+    align,
+    empty
   };
   const classes = useUtilityClasses(ownerState);
-  const contentWidth = Math.round(randomWidth());
+
+  // Memo prevents the non-circular skeleton widths changing to random widths on every render
+  const skeletonProps = React.useMemo(() => {
+    const isCircularContent = type === 'boolean' || type === 'actions';
+    if (isCircularContent) {
+      return {
+        variant: 'circular',
+        width: CIRCULAR_CONTENT_SIZE,
+        height: CIRCULAR_CONTENT_SIZE
+      };
+    }
+
+    // The width of the skeleton is a random number between the min and max values
+    // The min and max values are determined by the type of the column
+    const [min, max] = type ? CONTENT_WIDTH_RANGE_BY_TYPE[type] ?? DEFAULT_CONTENT_WIDTH_RANGE : DEFAULT_CONTENT_WIDTH_RANGE;
+    return {
+      variant: 'text',
+      width: `${Math.round(randomNumberGenerator(min, max))}%`,
+      height: CONTENT_HEIGHT
+    };
+  }, [type]);
   return /*#__PURE__*/_jsx("div", _extends({
-    className: classes.root,
-    style: {
+    "data-field": field,
+    className: clsx(classes.root, className),
+    style: _extends({
       height,
       maxWidth: width,
       minWidth: width
-    }
+    }, style)
   }, other, {
-    children: /*#__PURE__*/_jsx(Skeleton, {
-      width: `${contentWidth}%`,
-      height: 25
-    })
+    children: !empty && /*#__PURE__*/_jsx(Skeleton, _extends({}, skeletonProps))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
@@ -54,10 +90,16 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  align: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
-  width: PropTypes.number.isRequired
+  align: PropTypes.string,
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty: PropTypes.bool,
+  field: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : void 0;
 const Memoized = fastMemo(GridSkeletonCell);
 export { Memoized as GridSkeletonCell };

package/modern/components/containers/GridRoot.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className"];
+const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
 import { GridRootStyles } from './GridRootStyles';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     autoHeight,
@@ -25,15 +24,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridPanelAnchor = styled('div')({
-  position: 'absolute',
-  top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0
-});
 const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
   const {
-      children,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -54,16 +47,11 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   if (!mountedState) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
     className: clsx(className, classes.root),
     ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
-      role: "presentation",
-      "data-id": "gridPanelAnchor"
-    }), children]
-  }));
+  }, other));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/components/containers/GridRootStyles.js

@@ -161,7 +161,7 @@ export const GridRootStyles = styled('div', {
   const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
   const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : alpha(t.palette.primary.main, selectedOpacity);
   const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / calc(
-                ${t.vars.palette.action.selectedOpacity} + 
+                ${t.vars.palette.action.selectedOpacity} +
                 ${t.vars.palette.action.hoverOpacity}
               ))` : alpha(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
   const pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
@@ -425,6 +425,9 @@ export const GridRootStyles = styled('div', {
           backgroundColor: 'transparent'
         }
       },
+      [`&.${c.rowSkeleton}:hover`]: {
+        backgroundColor: 'transparent'
+      },
       '&.Mui-selected': selectedStyles
     },
     [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
@@ -631,7 +634,7 @@ export const GridRootStyles = styled('div', {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
       [`&.${c['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+        borderTop: '1px solid var(--rowBorderColor)'
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: 'var(--DataGrid-pinnedBackground)',
@@ -644,6 +647,12 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['filler--borderTop']}`]: {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+    },
+    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
+      [`& .${c.virtualScrollerContent}, & .${c['scrollbar--vertical']}, & .${c.pinnedRows}`]: {
+        display: 'none'
+      }
     }
   });
   return gridStyle;

package/modern/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -18,7 +18,7 @@ function GridFilterInputMultipleValue(props) {
       error,
       helperText,
       size,
-      variant
+      variant = 'standard'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const TextFieldProps = {

package/modern/components/virtualization/GridMainContainer.js

@@ -3,7 +3,12 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GridPanelAnchor = styled('div')({
+  position: 'absolute',
+  top: `var(--DataGrid-headersTotalHeight)`,
+  left: 0
+});
 const Element = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
@@ -16,12 +21,15 @@ const Element = styled('div', {
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const ariaAttributes = useGridAriaAttributes();
   const rootProps = useGridRootProps();
-  return /*#__PURE__*/_jsx(Element, _extends({
+  return /*#__PURE__*/_jsxs(Element, _extends({
     ref: ref,
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, {
-    children: props.children
+    children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
+      role: "presentation",
+      "data-id": "gridPanelAnchor"
+    }), props.children]
   }));
 });

package/modern/components/virtualization/GridVirtualScroller.js

@@ -9,7 +9,8 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
-import { GridOverlays } from '../base/GridOverlays';
+import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
+import { GridOverlays as Overlays } from '../base/GridOverlays';
 import { GridHeaders } from '../GridHeaders';
 import { GridMainContainer as Container } from './GridMainContainer';
 import { GridTopContainer as TopContainer } from './GridTopContainer';
@@ -19,12 +20,12 @@ import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerF
 import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
 import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = (ownerState, dimensions) => {
+const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight'],
+    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
     scroller: ['virtualScroller']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -51,7 +52,8 @@ function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const classes = useUtilityClasses(rootProps, dimensions);
+  const overlaysProps = useGridOverlays();
+  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
   const virtualScroller = useGridVirtualScroller();
   const {
     getContainerProps,
@@ -79,13 +81,15 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), /*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+      }), /*#__PURE__*/_jsx(Overlays, _extends({}, overlaysProps)), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
         }))
-      })), rows.length > 0 && /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
+      })), /*#__PURE__*/_jsx(SpaceFiller, {
+        rowsLength: rows.length
+      }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -16,22 +16,24 @@ const Pinned = styled('div')({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: 'var(--DataGrid-pinnedBackground)'
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,
-  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+  borderRight: '1px solid var(--rowBorderColor)'
 });
 const PinnedRight = styled(Pinned)({
   right: 0,
-  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+  borderLeft: '1px solid var(--rowBorderColor)'
 });
 const Main = styled('div')({
   flexGrow: 1,
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+  borderTop: '1px solid var(--rowBorderColor)'
 });
-function GridVirtualScrollerFiller() {
+function GridVirtualScrollerFiller({
+  rowsLength
+}) {
   const apiRef = useGridApiContext();
   const {
     viewportOuterSize,
@@ -52,7 +54,8 @@ function GridVirtualScrollerFiller() {
     className: gridClasses.filler,
     role: "presentation",
     style: {
-      height
+      height,
+      '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'
     },
     children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
       className: gridClasses['filler--pinnedLeft'],

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

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

@@ -89,6 +89,19 @@ export const gridExpandedRowCountSelector = createSelector(gridExpandedSortedRow
  */
 export const gridFilteredTopLevelRowCountSelector = createSelector(gridFilteredSortedTopLevelRowEntriesSelector, visibleSortedTopLevelRows => visibleSortedTopLevelRows.length);
 
+/**
+ * Get the amount of rows accessible after the filtering process.
+ * Includes top level and descendant rows.
+ * @category Filtering
+ */
+export const gridFilteredRowCountSelector = createSelector(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.length);
+
+/**
+ * Get the amount of descendant rows accessible after the filtering process.
+ * @category Filtering
+ */
+export const gridFilteredDescendantRowCountSelector = createSelector(gridFilteredRowCountSelector, gridFilteredTopLevelRowCountSelector, (totalRowCount, topLevelRowCount) => totalRowCount - topLevelRowCount);
+
 /**
  * @category Filtering
  * @ignore - do not document.

package/modern/hooks/features/overlays/useGridOverlays.js

@@ -0,0 +1,35 @@
+import { useGridSelector } from '../../utils';
+import { useGridApiContext } from '../../utils/useGridApiContext';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { gridExpandedRowCountSelector } from '../filter';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export const useGridOverlays = () => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  const noRows = totalRowCount === 0;
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && noRows;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  let overlayType = null;
+  let loadingOverlayVariant = null;
+  if (showNoRowsOverlay) {
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoResultsOverlay) {
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    overlayType = 'loadingOverlay';
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+  }
+  return {
+    overlayType,
+    loadingOverlayVariant
+  };
+};

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

@@ -4,11 +4,11 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
+import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useTheme } from '@mui/material/styles';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { useResizeObserver } from '../../utils/useResizeObserver';
 import { useRunOnce } from '../../utils/useRunOnce';
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from '../columns/gridColumnsSelector';
 import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
@@ -361,20 +361,12 @@ export const useGridVirtualScroller = () => {
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
   }), [needsHorizontalScrollbar, rootProps.autoHeight]);
   const contentSize = React.useMemo(() => {
-    // In cases where the columns exceed the available width,
-    // the horizontal scrollbar should be shown even when there're no rows.
-    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    const height = Math.max(contentHeight, 1);
     const size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height
+      height: contentHeight
     };
-    if (rootProps.autoHeight) {
-      if (currentPage.rows.length === 0) {
-        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
-      } else {
-        size.height = contentHeight;
-      }
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/modern/hooks/utils/index.js

@@ -5,5 +5,4 @@ export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
 export * from './useFirstRender';
 export * from './useOnMount';
-export * from './useResizeObserver';
 export * from './useRunOnce';

package/modern/index.js

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

package/modern/locales/esES.js

@@ -33,8 +33,7 @@ const esESGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Sin columnas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Restablecer',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/modern/utils/utils.js

@@ -172,9 +172,17 @@ function mulberry32(a) {
     /* eslint-enable */
   };
 }
-export function randomNumberBetween(seed, min, max) {
+
+/**
+ * Create a random number generator from a seed. The seed
+ * ensures that the random number generator produces the
+ * same sequence of 'random' numbers on every render. It
+ * returns a function that generates a random number between
+ * a specified min and max.
+ */
+export function createRandomNumberGenerator(seed) {
   const random = mulberry32(seed);
-  return () => min + (max - min) * random();
+  return (min, max) => min + (max - min) * random();
 }
 export function deepClone(obj) {
   if (typeof structuredClone === 'function') {

package/node/DataGrid/DataGrid.js

@@ -341,6 +341,7 @@ DataGridRaw.propTypes = {
   keepNonExistentRowsSelected: _propTypes.default.bool,
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: _propTypes.default.bool,
   /**

package/node/DataGrid/useDataGridProps.js

@@ -32,54 +32,55 @@ const DATA_GRID_FORCED_PROPS = {
 const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES = {
   autoHeight: false,
   autoPageSize: false,
+  autosizeOnMount: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
   columnBufferPx: 150,
-  rowBufferPx: 150,
-  rows: [],
-  rowSelection: true,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
   disableColumnFilter: false,
   disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
   disableColumnSelector: false,
+  disableColumnSorting: false,
   disableDensitySelector: false,
   disableEval: false,
   disableMultipleColumnsFiltering: false,
-  disableMultipleRowSelection: false,
-  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,
   editMode: _models.GridEditModes.Cell,
-  filterMode: 'client',
   filterDebounceMs: 150,
-  columnHeaderHeight: 56,
+  filterMode: 'client',
   hideFooter: false,
   hideFooterPagination: false,
   hideFooterRowCount: false,
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
-  rowHeight: 52,
   resizeThrottleMs: 60,
-  pageSizeOptions: [25, 50, 100],
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rowPositionsDebounceMs: 166,
+  rows: [],
+  rowSelection: true,
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
-  sortingOrder: ['asc', 'desc', null],
   sortingMode: 'client',
-  throttleRowsMs: 0,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false,
-  ignoreValueFormatterDuringExport: false,
-  clipboardCopyCellDelimiter: '\t',
-  rowPositionsDebounceMs: 166,
-  autosizeOnMount: false,
-  disableAutosize: false
+  sortingOrder: ['asc', 'desc', null],
+  throttleRowsMs: 0
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
@@ -94,9 +95,16 @@ const useDataGridProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PROPS_DEFAULT_VALUES, themedProps, {
+  const injectDefaultProps = React.useMemo(() => {
+    return Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
+      // @ts-ignore
+      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      return acc;
+    }, {});
+  }, [themedProps]);
+  return React.useMemo(() => (0, _extends2.default)({}, themedProps, injectDefaultProps, {
     localeText,
     slots
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots]);
+  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots, injectDefaultProps]);
 };
 exports.useDataGridProps = useDataGridProps;