@mui/x-data-grid 5.17.24 → 5.17.26

package/modern/components/panel/GridPanel.js

@@ -11,6 +11,7 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { isEscapeKey } from '../../utils/keyboardUtils';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = styled(Popper, {
@@ -42,6 +43,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
   const handleClickAway = React.useCallback(() => {
@@ -76,6 +78,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     placement: "bottom-start",
     className: clsx(className, classes.panel),
+    ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers
   }, other, {
@@ -84,6 +87,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,
+        ownerState: rootProps,
         elevation: 8,
         onKeyDown: handleKeyDown,
         children: isPlaced && children

package/modern/components/panel/GridPanelContent.js

@@ -39,12 +39,10 @@ function GridPanelContent(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 }
 

package/modern/components/panel/GridPanelFooter.js

@@ -39,12 +39,10 @@ function GridPanelFooter(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 }
 

package/modern/components/panel/GridPanelHeader.js

@@ -37,12 +37,10 @@ function GridPanelHeader(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 }
 

package/modern/components/panel/GridPanelWrapper.js

@@ -44,10 +44,7 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
@@ -56,7 +53,8 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
-      className: clsx(className, classes.root)
+      className: clsx(className, classes.root),
+      ownerState: rootProps
     }, other))
   }));
 });

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

@@ -133,10 +133,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const operatorSelectId = useId();
   const operatorSelectLabelId = useId();
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
   const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
@@ -229,13 +226,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   }), [currentOperator]);
   return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
     ref: ref,
-    className: classes.root
+    className: classes.root,
+    ownerState: rootProps
   }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+      ownerState: rootProps,
       children: /*#__PURE__*/_jsx(IconButton, {
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
@@ -254,6 +253,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         visibility: showMultiFilterOperators ? 'visible' : 'hidden'
       }, baseFormControlProps.sx || {}, linkOperatorInputProps.sx || {}),
       className: clsx(classes.linkOperatorInput, baseFormControlProps.className, linkOperatorInputProps.className),
+      ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLinkOperator')
@@ -273,6 +273,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
+      ownerState: rootProps,
       children: [/*#__PURE__*/_jsx(InputLabel, {
         htmlFor: columnSelectId,
         id: columnSelectLabelId,
@@ -295,6 +296,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
+      ownerState: rootProps,
       children: [/*#__PURE__*/_jsx(InputLabel, {
         htmlFor: operatorSelectId,
         id: operatorSelectLabelId,
@@ -318,6 +320,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+      ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -50,10 +50,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
   const lookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
@@ -75,6 +72,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
+        ownerState: rootProps,
         children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
@@ -82,7 +80,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         }, index)))
       })]
     });
-  }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);
+  }, [apiRef, rootProps, preferencePanel.open, activeFilters, lookup, classes]);
 
   const toggleFilter = event => {
     const {

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -84,6 +84,7 @@ function GridToolbarQuickFilter(props) {
   }, [updateSearchValue]);
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.components.BaseTextField,
+    ownerState: rootProps,
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,

package/modern/components/virtualization/GridVirtualScroller.js

@@ -38,13 +38,11 @@ const GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualSc
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(VirtualScrollerRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 export { GridVirtualScroller };

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -33,14 +33,16 @@ const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVi
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes,
+
+  const ownerState = _extends({}, rootProps, {
     overflowedContent: !rootProps.autoHeight && style?.minHeight === 'auto'
-  };
+  });
+
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
+    ownerState: ownerState,
     style: style
   }, other));
 });

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -36,13 +36,11 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 export { GridVirtualScrollerRenderZone };

package/modern/hooks/core/useGridLocaleText.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useGridApiMethod } from '../utils/useGridApiMethod';
 export const useGridLocaleText = (apiRef, props) => {
   const getLocaleText = React.useCallback(key => {
     if (props.localeText[key] == null) {
@@ -8,8 +7,5 @@ export const useGridLocaleText = (apiRef, props) => {
 
     return props.localeText[key];
   }, [props.localeText]);
-  const localeTextApi = {
-    getLocaleText
-  };
-  useGridApiMethod(apiRef, localeTextApi, 'LocaleTextApi');
+  apiRef.current.getLocaleText = getLocaleText;
 };

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

@@ -19,9 +19,9 @@ import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { isDeepEqual } from '../../../utils/utils'; // TODO: add the possibility to switch this value if needed for customization
-
+import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: add the possibility to switch this value if needed for customization
 const MERGE_EMPTY_CELLS = true;
 const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -223,6 +223,7 @@ export const useGridColumnHeaders = props => {
     return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
+      ownerState: rootProps,
       children: columns
     });
   };
@@ -343,6 +344,7 @@ export const useGridColumnHeaders = props => {
         },
         role: "row",
         "aria-rowindex": depthIndex + 1,
+        ownerState: rootProps,
         children: depthInfo.elements.map(({
           groupId,
           width,

package/modern/index.js

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

package/modern/locales/arSD.js

@@ -21,15 +21,15 @@ const arSDGrid = {
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'بحث...',
+  toolbarQuickFilterLabel: 'بحث',
+  toolbarQuickFilterDeleteIconLabel: 'أزال',
   // Export selector toolbar button text
   toolbarExport: 'تصدير',
   toolbarExportLabel: 'تصدير',
   toolbarExportCSV: 'تنزيل كملف CSV',
-  // toolbarExportPrint: 'Print',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportPrint: 'طباعة',
+  toolbarExportExcel: 'تحميل كملف الإكسل',
   // Columns panel text
   columnsPanelTextFieldLabel: 'البحث عن العمود',
   columnsPanelTextFieldPlaceholder: 'عنوان العمود',
@@ -107,17 +107,17 @@ const arSDGrid = {
   groupColumn: name => `تجميع حسب ${name}`,
   unGroupColumn: name => `إيقاف التجميع حسب ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'اظهار/اخفاء لوحة التفاصيل',
   expandDetailPanel: 'توسيع',
-  collapseDetailPanel: 'طوي' // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  collapseDetailPanel: 'طوي',
+  // Row reordering text
+  rowReorderingHeaderName: 'أعادة ترتيب الصفوف',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  aggregationMenuItemHeader: 'الدلالات الحسابية',
+  aggregationFunctionLabelSum: 'مجموع',
+  aggregationFunctionLabelAvg: 'معدل',
+  aggregationFunctionLabelMin: 'الحد الادنى',
+  aggregationFunctionLabelMax: 'الحد الاقصى',
+  aggregationFunctionLabelSize: 'الحجم'
 };
 export const arSD = getGridLocalization(arSDGrid, arSDCore);

package/modern/locales/csCZ.js

@@ -31,15 +31,15 @@ const csCZGrid = {
     return `${count} ${pluralForm}`;
   },
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Vyhledávat…',
+  toolbarQuickFilterLabel: 'Vyhledat',
+  toolbarQuickFilterDeleteIconLabel: 'Vymazat',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Stáhnout jako CSV',
   toolbarExportPrint: 'Vytisknout',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Stáhnout jako Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Najít sloupec',
   columnsPanelTextFieldPlaceholder: 'Název sloupce',
@@ -49,7 +49,7 @@ const csCZGrid = {
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelDeleteIconLabel: 'Odstranit',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'Logický operátor',
   filterPanelOperators: 'Operátory',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'A',
@@ -70,7 +70,7 @@ const csCZGrid = {
   filterOperatorOnOrBefore: 'je na nebo dříve',
   filterOperatorIsEmpty: 'je prázdný',
   filterOperatorIsNotEmpty: 'není prázdný',
-  // filterOperatorIsAnyOf: 'is any of',
+  filterOperatorIsAnyOf: 'je jeden z',
   // Filter values text
   filterValueAny: 'jakýkoliv',
   filterValueTrue: 'ano',
@@ -120,10 +120,10 @@ const csCZGrid = {
   },
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Výběr řádku',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: 'Označit všechny řádky',
+  checkboxSelectionUnselectAllRows: 'Odznačit všechny řádky',
+  checkboxSelectionSelectRow: 'Označit řádek',
+  checkboxSelectionUnselectRow: 'Odznačit řádek',
   // Boolean cell text
   booleanCellTrueLabel: 'ano',
   booleanCellFalseLabel: 'ne',
@@ -139,20 +139,20 @@ const csCZGrid = {
   treeDataCollapse: 'skrýt potomky',
   // Grouping columns
   groupingColumnHeaderName: 'Skupina',
-  groupColumn: name => `Zoskupit podle ${name}`,
-  unGroupColumn: name => `Přestat zoskupovat podle ${name}` // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  groupColumn: name => `Zeskupit podle ${name}`,
+  unGroupColumn: name => `Přestat zeskupovat podle ${name}`,
+  // Master/detail
+  detailPanelToggle: 'Přepnout detail panelu',
+  expandDetailPanel: 'Rozbalit',
+  collapseDetailPanel: 'Sbalit',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  rowReorderingHeaderName: 'Přeuspořádávání řádků',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  aggregationMenuItemHeader: 'Seskupování',
+  aggregationFunctionLabelSum: 'součet',
+  aggregationFunctionLabelAvg: 'průměr',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'počet'
 };
 export const csCZ = getGridLocalization(csCZGrid, csCZCore);

package/modern/locales/esES.js

@@ -33,7 +33,7 @@ const esESGrid = {
   // Columns panel text
   columnsPanelTextFieldLabel: 'Columna de búsqueda',
   columnsPanelTextFieldPlaceholder: 'Título de columna',
-  columnsPanelDragIconLabel: 'Reorder columna',
+  columnsPanelDragIconLabel: 'Reordenar columna',
   columnsPanelShowAllButton: 'Mostrar todo',
   columnsPanelHideAllButton: 'Ocultar todo',
   // Filter panel text

package/node/components/GridRowCount.js

@@ -64,10 +64,7 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(ownerState);
 
   if (rowCount === 0) {
@@ -77,7 +74,8 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridRowCountRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState
   }, other, {
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));

package/node/components/GridScrollArea.js

@@ -87,8 +87,8 @@ function GridScrollAreaRaw(props) {
     top: 0
   });
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = (0, _extends2.default)({}, props, {
-    classes: rootProps.classes
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    scrollDirection
   });
   const classes = useUtilityClasses(ownerState);
   const handleScrolling = React.useCallback(newScrollPosition => {
@@ -129,6 +129,7 @@ function GridScrollAreaRaw(props) {
   return dragging ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: (0, _clsx.default)(classes.root),
+    ownerState: ownerState,
     onDragOver: handleDragOver,
     style: {
       height

package/node/components/GridSelectedRowCount.js

@@ -71,15 +71,13 @@ const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelected
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(ownerState);
   const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridSelectedRowCountRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState
   }, other, {
     children: rowSelectedText
   }));

package/node/components/cell/GridEditInputCell.js

@@ -82,10 +82,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const handleChange = React.useCallback(async event => {
     var _rootProps$experiment2;
 
@@ -126,6 +123,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     inputRef: inputRef,
     className: classes.root,
+    ownerState: rootProps,
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -63,13 +63,11 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderTitleRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 

package/node/components/columnHeaders/GridColumnHeaders.js

@@ -69,13 +69,11 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(className, classes.root)
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
   }, other));
 });
 exports.GridColumnHeaders = GridColumnHeaders;

package/node/components/columnHeaders/GridColumnHeadersInner.js

@@ -72,15 +72,15 @@ const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumn
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
+  const ownerState = (0, _extends2.default)({}, rootProps, {
     isDragging,
-    hasScrollX: (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.hasScrollX) != null ? _apiRef$current$getRo : false,
-    classes: rootProps.classes
-  };
+    hasScrollX: (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.hasScrollX) != null ? _apiRef$current$getRo : false
+  });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersInnerRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(className, classes.root)
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: ownerState
   }, other));
 });
 exports.GridColumnHeadersInner = GridColumnHeadersInner;

package/node/components/columnHeaders/GridIconButtonContainer.js

@@ -56,13 +56,11 @@ const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconB
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonContainerRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 exports.GridIconButtonContainer = GridIconButtonContainer;

package/node/components/containers/GridFooterContainer.js

@@ -66,13 +66,11 @@ const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterCon
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterContainerRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 exports.GridFooterContainer = GridFooterContainer;