@mui/x-data-grid 5.17.22 → 5.17.24

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Brazilian Portuguese (pt-BR) locale
+- 🎉 Add banner and callouts to inform about MUI X v6 beta
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.23` / `@mui/x-data-grid-pro@v5.17.23` / `@mui/x-data-grid-premium@v5.17.23`
+
+#### Changes
+
+- [DataGrid] Allow to customize the value displayed in the filter button tooltip (#7816) @ithrforu
+- [DataGrid] Fix `getCellElement` method not working with pinned columns (#7844) @yaredtsy
+- [DataGrid] Fix stale rows issue in `unstable_replaceRows` (#7694) @MBilalShafi
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#7850) @ed-ateixeira
+
+### `@mui/x-date-pickers@v_5.0.18` / `@mui/x-date-pickers-pro@v_5.0.18`
+
+#### Changes
+
+- [pickers] Update pickers when new value has a distinct timezone (#7853) @alexfauquette
+
+### Docs
+
+- [docs] Add messages in v5 doc to inform people about v6 (#7838) @flaviendelangle
+- [docs] Fix 301 link @oliviertassinari
+
+### Core
+
+- [core] Upgrade monorepo (#7849) @cherniavskii
+
 ## v5.17.22
 
 _Feb 2, 2023_

package/components/panel/GridColumnsPanel.js

@@ -226,6 +226,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/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,7 +38,8 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -46,15 +48,33 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  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)
     }, 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/toolbar/GridToolbarFilterButton.js

@@ -67,18 +67,21 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
 
     const getOperatorLabel = item => lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operatorValue)}`).toString();
 
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => {
-          var _item$value;
-
-          return _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
-            children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
+          children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${(_item$value = item.value) != null ? _item$value : ''}`
-          }, index));
-        })
+                  ${item.value ? getFilterItemValue(item) : ''}`
+        }, index)))
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

package/hooks/features/rows/useGridRows.js

@@ -299,14 +299,19 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.unstable_caches.rows.idRowsLookup = updatedIdRowsLookup;
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
-    apiRef.current.setState(state => _extends({}, state, {
-      rows: _extends({}, state.rows, {
+    apiRef.current.setState(state => {
+      const newRowsState = {
         idRowsLookup: updatedIdRowsLookup,
         idToIdLookup: updatedIdToIdLookup,
         tree: updatedTree,
         ids: updatedRows
-      })
-    }));
+      };
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: _extends({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -53,6 +53,15 @@ export const getRenderableIndexes = ({
 }) => {
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 export const useGridVirtualScroller = props => {
   var _currentPage$range3, _currentPage$range4;
 
@@ -218,6 +227,11 @@ export const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/index.js

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

package/legacy/components/panel/GridColumnsPanel.js

@@ -247,6 +247,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/legacy/components/panel/GridPanelWrapper.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
+var _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';
@@ -39,6 +40,8 @@ var isEnabled = function isEnabled() {
 
 var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   var className = props.className,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var rootProps = useGridRootProps();
@@ -46,15 +49,33 @@ var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(p
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  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)
     }, 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/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -71,14 +71,21 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
       }).label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(item.operatorValue))).toString();
     };
 
+    var getFilterItemValue = function getFilterItemValue(item) {
+      var _ref2 = lookup[item.columnField].filterOperators.find(function (operator) {
+        return operator.value === item.operatorValue;
+      }),
+          getValueAsString = _ref2.getValueAsString;
+
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map(function (item, index) {
-          var _item$value;
-
           return _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
-            children: "".concat(lookup[item.columnField].headerName || item.columnField, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat((_item$value = item.value) != null ? _item$value : '')
+            children: "".concat(lookup[item.columnField].headerName || item.columnField, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(item.value ? getFilterItemValue(item) : '')
           }, index));
         })
       })]

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

@@ -329,12 +329,15 @@ export var useGridRows = function useGridRows(apiRef, props) {
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
     apiRef.current.setState(function (state) {
+      var newRowsState = {
+        idRowsLookup: updatedIdRowsLookup,
+        idToIdLookup: updatedIdToIdLookup,
+        tree: updatedTree,
+        ids: updatedRows
+      };
       return _extends({}, state, {
-        rows: _extends({}, state.rows, {
-          idRowsLookup: updatedIdRowsLookup,
-          idToIdLookup: updatedIdToIdLookup,
-          tree: updatedTree,
-          ids: updatedRows
+        rows: _extends({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: _extends({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
         })
       });
     });

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

@@ -56,6 +56,15 @@ export var getRenderableIndexes = function getRenderableIndexes(_ref) {
       maxLastIndex = _ref.maxLastIndex;
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+
+var areRenderContextsEqual = function areRenderContextsEqual(context1, context2) {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var _currentPage$range3, _currentPage$range4;
 
@@ -241,6 +250,11 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   var updateRenderContext = React.useCallback(function (nextRenderContext) {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
 

package/legacy/index.js

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

package/legacy/utils/domUtils.js

@@ -27,17 +27,19 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector("[role=\"columnheader\"][data-field=\"".concat(escapeOperandAttributeSelector(field), "\"]"));
 }
+
+function getGridRowElementSelector(id) {
+  return ".".concat(gridClasses.row, "[data-id=\"").concat(escapeOperandAttributeSelector(String(id)), "\"]");
+}
+
 export function getGridRowElement(root, id) {
-  return root.querySelector(".".concat(gridClasses.row, "[data-id=\"").concat(escapeOperandAttributeSelector(String(id)), "\"]"));
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, _ref) {
   var id = _ref.id,
       field = _ref.field;
-  var row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]"));
+  var rowSelector = getGridRowElementSelector(id);
+  var cellSelector = ".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]");
+  var selector = "".concat(rowSelector, " ").concat(cellSelector);
+  return root.querySelector(selector);
 }

package/models/gridFilterOperator.d.ts

@@ -35,6 +35,12 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      * The props to pass to the input component in the filter panel for this filter operator.
      */
     InputComponentProps?: Record<string, any>;
+    /**
+     * Converts the value of a filter item to a human-readable form.
+     * @param {GridFilterItem['value']} value The filter item value.
+     * @returns {string} The value formatted to be displayed in the UI of filter button tooltip.
+     */
+    getValueAsString?: (value: GridFilterItem['value']) => string;
     /**
      * If `false`, filter operator doesn't require user-entered value to work.
      * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)

package/modern/components/panel/GridColumnsPanel.js

@@ -220,6 +220,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/modern/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,7 +38,8 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -46,15 +48,33 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  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)
     }, 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/modern/components/toolbar/GridToolbarFilterButton.js

@@ -65,13 +65,20 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
 
     const getOperatorLabel = item => lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operatorValue)}`).toString();
 
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value ?? ''}`
+                  ${item.value ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

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

@@ -291,14 +291,19 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.unstable_caches.rows.idRowsLookup = updatedIdRowsLookup;
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
-    apiRef.current.setState(state => _extends({}, state, {
-      rows: _extends({}, state.rows, {
+    apiRef.current.setState(state => {
+      const newRowsState = {
         idRowsLookup: updatedIdRowsLookup,
         idToIdLookup: updatedIdToIdLookup,
         tree: updatedTree,
         ids: updatedRows
-      })
-    }));
+      };
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: _extends({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {

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

@@ -53,6 +53,15 @@ export const getRenderableIndexes = ({
 }) => {
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 export const useGridVirtualScroller = props => {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -214,6 +223,11 @@ export const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/modern/index.js

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

package/modern/utils/domUtils.js

@@ -27,18 +27,20 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
+
+function getGridRowElementSelector(id) {
+  return `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
+
 export function getGridRowElement(root, id) {
-  return root.querySelector(`.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(`.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }

package/node/components/panel/GridColumnsPanel.js

@@ -255,5 +255,16 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // ----------------------------------------------------------------------
   autoFocusSearchField: _propTypes.default.bool,
   searchPredicate: _propTypes.default.func,
+  slotProps: _propTypes.default.shape({
+    TrapFocus: _propTypes.default.shape({
+      children: _propTypes.default.element.isRequired,
+      disableAutoFocus: _propTypes.default.bool,
+      disableEnforceFocus: _propTypes.default.bool,
+      disableRestoreFocus: _propTypes.default.bool,
+      getTabbable: _propTypes.default.func,
+      isEnabled: _propTypes.default.func,
+      open: _propTypes.default.bool.isRequired
+    })
+  }),
   sort: _propTypes.default.oneOf(['asc', 'desc'])
 } : void 0;

package/node/components/panel/GridPanelWrapper.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
@@ -27,7 +29,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -60,7 +62,8 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -68,15 +71,33 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, (0, _extends2.default)({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
       ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(className, classes.root)
     }, other))
-  });
+  }));
 });
-exports.GridPanelWrapper = GridPanelWrapper;
+exports.GridPanelWrapper = GridPanelWrapper;
+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.default.shape({
+    TrapFocus: _propTypes.default.shape({
+      children: _propTypes.default.element.isRequired,
+      disableAutoFocus: _propTypes.default.bool,
+      disableEnforceFocus: _propTypes.default.bool,
+      disableRestoreFocus: _propTypes.default.bool,
+      getTabbable: _propTypes.default.func,
+      isEnabled: _propTypes.default.func,
+      open: _propTypes.default.bool.isRequired
+    })
+  })
+} : void 0;

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -95,18 +95,21 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
 
     const getOperatorLabel = item => lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue).label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.capitalize)(item.operatorValue)}`).toString();
 
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => {
-          var _item$value;
-
-          return (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${(_item$value = item.value) != null ? _item$value : ''}`
-          }, index));
-        })
+                  ${item.value ? getFilterItemValue(item) : ''}`
+        }, index)))
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

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

@@ -321,14 +321,19 @@ const useGridRows = (apiRef, props) => {
     apiRef.current.unstable_caches.rows.idRowsLookup = updatedIdRowsLookup;
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      rows: (0, _extends2.default)({}, state.rows, {
+    apiRef.current.setState(state => {
+      const newRowsState = {
         idRowsLookup: updatedIdRowsLookup,
         idToIdLookup: updatedIdToIdLookup,
         tree: updatedTree,
         ids: updatedRows
-      })
-    }));
+      };
+      return (0, _extends2.default)({}, state, {
+        rows: (0, _extends2.default)({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: (0, _extends2.default)({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {

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

@@ -90,6 +90,14 @@ const getRenderableIndexes = ({
 
 exports.getRenderableIndexes = getRenderableIndexes;
 
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 const useGridVirtualScroller = props => {
   var _currentPage$range3, _currentPage$range4;
 
@@ -255,6 +263,11 @@ const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/node/index.js

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

package/node/utils/domUtils.js

@@ -47,19 +47,20 @@ function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
 
+function getGridRowElementSelector(id) {
+  return `.${_gridClasses.gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
+
 function getGridRowElement(root, id) {
-  return root.querySelector(`.${_gridClasses.gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 
 function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(`.${_gridClasses.gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${_gridClasses.gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.17.22",
+  "version": "5.17.24",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/utils/domUtils.js

@@ -27,18 +27,20 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
+
+function getGridRowElementSelector(id) {
+  return `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
+
 export function getGridRowElement(root, id) {
-  return root.querySelector(`.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(`.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }