@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.2

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -92,12 +92,11 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
   React.useEffect(() => {
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
-  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
-  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
+  const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: ref,
     indeterminate: isIndeterminate,
-    checked: checked,
+    checked: isChecked && !isIndeterminate,
     onChange: handleChange,
     className: classes.root,
     inputProps: {

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -20,6 +22,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnsManagement'],
     header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
@@ -42,7 +45,8 @@ function GridColumnsManagement(props) {
     disableShowHideToggle = false,
     disableResetButton = false,
     toggleAllMode = 'all',
-    getTogglableColumns
+    getTogglableColumns,
+    searchInputProps
   } = props;
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
@@ -109,28 +113,52 @@ function GridColumnsManagement(props) {
     }
     return false;
   };
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    searchInputRef.current.focus();
+  }, []);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
       className: classes.header,
       ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      children: /*#__PURE__*/_jsx(SearchInput, _extends({
+        as: rootProps.slots.baseTextField,
+        ownerState: rootProps,
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
         inputRef: searchInputRef,
+        className: classes.searchInput,
         value: searchValue,
         onChange: handleSearchValueChange,
         variant: "outlined",
         size: "small",
+        type: "search",
         InputProps: {
           startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
             position: "start",
             children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
           }),
-          sx: {
-            pl: 1.5
-          }
+          endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+            "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+            size: "small",
+            sx: [searchValue ? {
+              visibility: 'visible'
+            } : {
+              visibility: 'hidden'
+            }],
+            tabIndex: -1,
+            onClick: handleSearchReset
+          }, rootProps.slotProps?.baseIconButton, {
+            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+              fontSize: "small"
+            })
+          }))
+        },
+        inputProps: {
+          'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
         },
+        autoComplete: "off",
         fullWidth: true
-      }, rootProps.slotProps?.baseTextField))
+      }, rootProps.slotProps?.baseTextField, searchInputProps))
     }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
@@ -205,6 +233,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
+  searchInputProps: PropTypes.object,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),
   /**
@@ -239,6 +268,24 @@ const GridColumnsManagementHeader = styled('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
+const SearchInput = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput',
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
+})(({
+  theme
+}) => ({
+  [`& .${inputBaseClasses.root}`]: {
+    padding: theme.spacing(0, 1.5, 0, 1.5)
+  },
+  [`& .${inputBaseClasses.input}::-webkit-search-decoration,
+  & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }
+}));
 const GridColumnsManagementFooter = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter',

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -36,7 +36,7 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: columnButtonId,
@@ -45,10 +45,9 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
-    }, buttonProps, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -83,7 +83,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -92,10 +92,9 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
-        id: densityButtonId
-      }, buttonProps, {
+        id: densityButtonId,
         onClick: handleDensitySelectorOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -42,7 +42,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -51,10 +51,9 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId
-      }, buttonProps, {
+        id: exportButtonId,
         onClick: handleMenuOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -37,6 +37,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
+  const badgeProps = slotProps.badge || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -94,7 +95,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -103,14 +104,14 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, _extends({
         badgeContent: activeFilters.length,
-        color: "primary",
+        color: "primary"
+      }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
+      })),
       onClick: toggleFilter
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -78,6 +78,7 @@ function GridToolbarQuickFilter(props) {
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
   const handleSearchValueChange = React.useCallback(event => {
     const newSearchValue = event.target.value;
     setSearchValue(newSearchValue);

package/modern/components/virtualization/GridVirtualScroller.js

@@ -10,7 +10,6 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
-import { GridOverlays as Overlays } from "../base/GridOverlays.js";
 import { GridHeaders } from "../GridHeaders.js";
 import { GridMainContainer as Container } from "./GridMainContainer.js";
 import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
@@ -55,7 +54,10 @@ function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const overlaysProps = useGridOverlays();
+  const {
+    getOverlay,
+    overlaysProps
+  } = useGridOverlays();
   const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
   const virtualScroller = useGridVirtualScroller();
   const {
@@ -84,7 +86,7 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), /*#__PURE__*/_jsx(Overlays, _extends({}, overlaysProps)), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+      }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller

package/modern/constants/dataGridPropsDefaultValues.js

@@ -34,8 +34,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
   ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
   keepColumnPositionIfDraggedOutside: false,
   keepNonExistentRowsSelected: false,
   loading: false,
@@ -56,5 +54,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  unstable_rowSpanning: false,
+  virtualizeColumnsWithAutoRowHeight: false
 };

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', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', '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--borderBottom', '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', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', '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', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', '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', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/constants/localeTextConstants.js

@@ -21,6 +21,16 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
+  // Prompt toolbar field
+  toolbarPromptControlPlaceholder: 'Type a prompt…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  toolbarPromptControlLabel: 'Prompt input',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  toolbarPromptControlSendActionLabel: 'Send',
+  toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
@@ -32,6 +42,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   columnsManagementNoColumns: 'No columns',
   columnsManagementShowHideAllText: 'Show/Hide All',
   columnsManagementReset: 'Reset',
+  columnsManagementDeleteIconLabel: 'Clear',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

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

@@ -283,7 +283,7 @@ export const useGridColumnHeaders = props => {
         fields: headerInfo.fields,
         colIndex: headerInfo.colIndex,
         depth: depth,
-        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
         height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
@@ -291,7 +291,7 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: rowStructure.length,
+        sectionLength: visibleColumnGroupHeader.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { throttle } from '@mui/x-internals/throttle';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
@@ -66,28 +66,13 @@ export function useGridDimensions(apiRef, props) {
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
-  const previousSize = React.useRef();
+  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {
     apiRef.current.setState(state => _extends({}, state, {
       dimensions
     }));
   });
-  const resize = React.useCallback(() => {
-    const element = apiRef.current.mainElementRef.current;
-    if (!element) {
-      return;
-    }
-    const computedStyle = ownerWindow(element).getComputedStyle(element);
-    const newSize = {
-      width: parseFloat(computedStyle.width) || 0,
-      height: parseFloat(computedStyle.height) || 0
-    };
-    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
-      apiRef.current.publishEvent('resize', newSize);
-      previousSize.current = newSize;
-    }
-  }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
     if (!dimensions.isReady) {
@@ -198,7 +183,6 @@ export function useGridDimensions(apiRef, props) {
     apiRef.current.updateRenderContext?.();
   }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
-    resize,
     getRootDimensions
   };
   const apiPrivate = {
@@ -238,7 +222,7 @@ export function useGridDimensions(apiRef, props) {
     rootDimensionsRef.current = size;
 
     // jsdom has no layout capabilities
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;

package/modern/hooks/features/index.js

@@ -7,6 +7,7 @@ export * from "./density/index.js";
 export * from "./editing/index.js";
 export * from "./filter/index.js";
 export * from "./focus/index.js";
+export * from "./listView/index.js";
 export * from "./pagination/index.js";
 export * from "./preferencesPanel/index.js";
 export * from "./rows/index.js";

package/modern/hooks/features/listView/gridListViewSelectors.js

@@ -1,4 +1,6 @@
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 export const gridListColumnSelector = state => state.listViewColumn;

package/modern/hooks/features/listView/index.js

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.js";

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

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridApiContext } from "../../utils/useGridApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
+import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
@@ -28,8 +32,22 @@ export const useGridOverlays = () => {
     overlayType = 'loadingOverlay';
     loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
   }
-  return {
+  const overlaysProps = {
     overlayType,
     loadingOverlayVariant
   };
+  const getOverlay = () => {
+    if (!overlayType) {
+      return null;
+    }
+    const Overlay = rootProps.slots?.[overlayType];
+    const overlayProps = rootProps.slotProps?.[overlayType];
+    return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, overlaysProps, {
+      children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
+    }));
+  };
+  return {
+    getOverlay,
+    overlaysProps
+  };
 };

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -248,11 +248,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -480,9 +476,4 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };

package/modern/hooks/features/rowSelection/utils.js

@@ -6,8 +6,8 @@ import { selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { createSelector } from "../../../utils/createSelector.js";
 export const ROW_SELECTION_PROPAGATION_DEFAULT = {
-  parents: false,
-  descendants: false
+  parents: true,
+  descendants: true
 };
 function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   const rowTree = gridRowTreeSelector(apiRef);

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

@@ -4,8 +4,8 @@ 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 { useRtl } from '@mui/system/RtlProvider';
+import reactMajor from '@mui/x-internals/reactMajor';
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
@@ -48,7 +48,7 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
 let isJSDOM = false;
 try {
   if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom/.test(window.navigator.userAgent);
+    isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
   }
 } catch (_) {
   /* ignore */
@@ -86,7 +86,44 @@ export const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
-  useResizeObserver(mainRef, () => apiRef.current.resize());
+  const mainRefCallback = React.useCallback(node => {
+    mainRef.current = node;
+    if (!node) {
+      return undefined;
+    }
+    const initialRect = node.getBoundingClientRect();
+    let lastSize = {
+      width: initialRect.width,
+      height: initialRect.height
+    };
+    apiRef.current.publishEvent('resize', lastSize);
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const newSize = {
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      };
+      if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
+        return;
+      }
+      apiRef.current.publishEvent('resize', newSize);
+      lastSize = newSize;
+    });
+    observer.observe(node);
+    if (reactMajor >= 19) {
+      return () => {
+        mainRef.current = null;
+        observer.disconnect();
+      };
+    }
+    return undefined;
+  }, [apiRef, mainRef]);
 
   /*
    * Scroll context logic
@@ -137,9 +174,13 @@ export const useGridVirtualScroller = () => {
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef, dimensions.isReady]);
   const triggerUpdateRenderContext = useEventCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) {
+      return undefined;
+    }
     const newScroll = {
-      top: scrollerRef.current.scrollTop,
-      left: scrollerRef.current.scrollLeft
+      top: scroller.scrollTop,
+      left: scroller.scrollLeft
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -389,10 +430,6 @@ export const useGridVirtualScroller = () => {
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
-  useEnhancedEffect(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
   useEnhancedEffect(() => {
     // TODO a scroll reset should not be necessary
     if (enabledForColumns) {
@@ -428,7 +465,7 @@ export const useGridVirtualScroller = () => {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef
+      ref: mainRefCallback
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
@@ -485,7 +522,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false
+    listView: rootProps.unstable_listView ?? false,
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -533,11 +571,13 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
       positions: inputs.rowsMeta.positions,
       lastSize: inputs.lastRowHeight
     });
-    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-      const row = inputs.rows[i];
-      hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+    if (!inputs.virtualizeColumnsWithAutoRowHeight) {
+      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+        const row = inputs.rows[i];
+        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+      }
     }
-    if (!hasRowWithAutoHeight) {
+    if (!hasRowWithAutoHeight || inputs.virtualizeColumnsWithAutoRowHeight) {
       firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
         atStart: true,
         lastPosition: inputs.columnsTotalWidth

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.0
+ * @mui/x-data-grid v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the