@mui/x-data-grid 5.17.23 → 5.17.25

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.25
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.25` / `@mui/x-data-grid-pro@v5.17.25` / `@mui/x-data-grid-premium@v5.17.25`
+
+#### Changes
+
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7757) @lolaignatova
+
+### `@mui/x-date-pickers@v5.0.20` / `@mui/x-date-pickers-pro@v5.0.20`
+
+#### Changes
+
+- [DateTimePicker] Ensure toolbar `viewType` is correctly updated (#7942) @LukasTy
+
+## 5.17.24
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hungarian (hu-HU) locale
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.24` / `@mui/x-data-grid-pro@v5.17.24` / `@mui/x-data-grid-premium@v5.17.24`
+
+#### Changes
+
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7897) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7945) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7878) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7959) @MBilalShafi
+
+### `@mui/x-date-pickers@v5.0.19` / `@mui/x-date-pickers-pro@v5.0.19`
+
+#### Changes
+
+- [l10n] Add Hungarian (hu-HU) locale (#7796) @noherczeg
+
 ## 5.17.23
 
 _Feb 9, 2023_

package/components/GridRowCount.js

@@ -41,10 +41,7 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = useGridRootProps();
   const classes = useUtilityClasses(ownerState);
 
   if (rowCount === 0) {
@@ -54,7 +51,8 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
   return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: ownerState
   }, other, {
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));

package/components/GridScrollArea.js

@@ -62,8 +62,8 @@ function GridScrollAreaRaw(props) {
   });
   const rootProps = useGridRootProps();
 
-  const ownerState = _extends({}, props, {
-    classes: rootProps.classes
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -105,6 +105,7 @@ function GridScrollAreaRaw(props) {
   return dragging ? /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: clsx(classes.root),
+    ownerState: ownerState,
     onDragOver: handleDragOver,
     style: {
       height

package/components/GridSelectedRowCount.js

@@ -48,15 +48,13 @@ const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelected
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = useGridRootProps();
   const classes = useUtilityClasses(ownerState);
   const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
   return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: ownerState
   }, other, {
     children: rowSelectedText
   }));

package/components/cell/GridEditInputCell.js

@@ -57,10 +57,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const apiRef = 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;
 
@@ -101,6 +98,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/components/columnHeaders/GridColumnHeaderTitle.js

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

package/components/columnHeaders/GridColumnHeaders.js

@@ -48,12 +48,10 @@ export const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColu
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 });

package/components/columnHeaders/GridColumnHeadersInner.js

@@ -50,14 +50,16 @@ export const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function Gri
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const ownerState = {
+
+  const ownerState = _extends({}, 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__*/_jsx(GridColumnHeadersInnerRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: ownerState
   }, other));
 });

package/components/columnHeaders/GridIconButtonContainer.js

@@ -35,12 +35,10 @@ export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function Gr
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });

package/components/containers/GridFooterContainer.js

@@ -44,13 +44,11 @@ const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterCon
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {

package/components/containers/GridMainContainer.js

@@ -28,12 +28,10 @@ const GridMainContainerRoot = styled('div', {
 }));
 export function GridMainContainer(props) {
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridMainContainerRoot, {
     className: classes.root,
+    ownerState: rootProps,
     children: props.children
   });
 }

package/components/containers/GridOverlay.js

@@ -47,13 +47,11 @@ const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, re
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {

package/components/containers/GridRoot.js

@@ -45,11 +45,11 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
-  const ownerState = {
-    density: densityValue,
-    classes: rootProps.classes,
-    autoHeight: rootProps.autoHeight
-  };
+
+  const ownerState = _extends({}, rootProps, {
+    density: densityValue
+  });
+
   const classes = useUtilityClasses(ownerState);
   apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
 
@@ -70,6 +70,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
     className: clsx(className, classes.root),
+    ownerState: ownerState,
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,

package/components/containers/GridRootStyles.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+import { DataGridProcessedProps } from '../../models/props/DataGridProps';
+export declare type OwnerState = DataGridProcessedProps;
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: OwnerState;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/components/containers/GridToolbarContainer.js

@@ -40,10 +40,7 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
 
   if (!children) {
     return null;
@@ -51,7 +48,8 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
 
   return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other, {
     children: children
   }));

package/components/menu/GridMenu.js

@@ -61,10 +61,7 @@ const GridMenu = props => {
   const prevTarget = React.useRef(target);
   const prevOpen = React.useRef(open);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   React.useEffect(() => {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
@@ -92,6 +89,7 @@ const GridMenu = props => {
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.components.BasePopper,
     className: clsx(className, classes.root),
+    ownerState: rootProps,
     open: open,
     anchorEl: target,
     transition: true,

package/components/panel/GridColumnsPanel.js

@@ -37,9 +37,9 @@ const GridColumnsPanelRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsPanel',
   overridesResolver: (props, styles) => styles.columnsPanel
-})(() => ({
+})({
   padding: '8px 0px 8px 8px'
-}));
+});
 const GridColumnsPanelRowRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsPanelRow',
@@ -72,10 +72,7 @@ function GridColumnsPanel(props) {
   const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const rootProps = useGridRootProps();
   const [searchValue, setSearchValue] = React.useState('');
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
 
   const {
     sort,
@@ -179,11 +176,13 @@ function GridColumnsPanel(props) {
     }), /*#__PURE__*/_jsx(GridPanelContent, {
       children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
         className: classes.root,
+        ownerState: rootProps,
         children: currentColumns.map(column => {
           var _rootProps$components2;
 
           return /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
             className: classes.columnsPanelRow,
+            ownerState: rootProps,
             children: [/*#__PURE__*/_jsx(FormControlLabel, {
               control: /*#__PURE__*/_jsx(rootProps.components.BaseSwitch, _extends({
                 disabled: column.hideable === false,
@@ -226,6 +225,17 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // ----------------------------------------------------------------------
   autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  }),
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/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, {
@@ -44,6 +45,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(() => {
@@ -78,6 +80,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, {
@@ -86,6 +89,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/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/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/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/components/panel/GridPanelWrapper.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
+import { TrapFocusProps } from '@mui/material/Unstable_TrapFocus';
 import { Theme } from '@mui/material/styles';
 import { MUIStyledCommonProps } from '@mui/system';
 export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
+    slotProps?: {
+        TrapFocus?: TrapFocusProps;
+    };
 }
 declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export { GridPanelWrapper };

package/components/panel/GridPanelWrapper.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
@@ -37,24 +38,41 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
-      className: clsx(className, classes.root)
+      className: clsx(className, classes.root),
+      ownerState: rootProps
     }, other))
-  });
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  })
+} : void 0;
 export { GridPanelWrapper };

package/components/panel/filterPanel/GridFilterForm.js

@@ -135,10 +135,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;
@@ -235,13 +232,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'),
@@ -260,6 +259,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')
@@ -279,6 +279,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,
@@ -301,6 +302,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,
@@ -324,6 +326,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 != null && currentOperator.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,

package/components/toolbar/GridToolbarFilterButton.js

@@ -52,10 +52,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');
@@ -77,6 +74,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)}
@@ -84,7 +82,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 => {
     var _buttonProps$onClick;

package/components/toolbar/GridToolbarQuickFilter.js

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