@mui/x-data-grid-premium 6.9.0 → 6.9.2

package/CHANGELOG.md

@@ -3,23 +3,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.9.2
+
+_Jul 6, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Auto-scroll when making range selection (#8661) @m4theushw
+
+- 📚 New page: Components lifecycle (#8372) @flaviendelangle
+
+  Clarify pickers events and value updates in a [single docs page](https://mui.com/x/react-date-pickers/lifecycle/).
+
+- 🥧 Add pie chart component
+
+  They are fresh from the code editor. You can visit [pie charts docs](https://mui.com/x/react-charts/pie/) or their [demo page](https://mui.com/x/react-charts/pie-demo/).
+
+  <img width="380" alt="pie-charts" src="https://github.com/mui/mui-x/assets/13808724/fe908c45-803c-4316-b913-dbd2f9f0551e">
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.2` / `@mui/x-data-grid-pro@v6.9.2` / `@mui/x-data-grid-premium@v6.9.2`
+
+#### Changes
+
+- [DataGrid] Fix `RangeError` when using flex columns (#9554) @cherniavskii
+- [DataGrid] Fix React 17 editing bug (#9530) @romgrk
+- [DataGrid] Use `getRowId` in filtering (#9564) @romgrk
+- [DataGrid] Correctly reflect `TablePagination`'s `rowsPerPageOptions` shape to `pageSizeOptions` (#9438) @burakkgunduzz
+- [DataGridPremium] Auto-scroll when making range selection (#8661) @m4theushw
+- [l10n] Improve Spanish (es-ES) locale (#9500) @fufex
+
+### `@mui/x-date-pickers@v6.9.2` / `@mui/x-date-pickers-pro@v6.9.2`
+
+#### Changes
+
+- [pickers] Forward digital clock classes (#9555) @YoonjiJang
+- [pickers] Rename `internal` folder to `internals` on `@mui/x-date-picker-pro` (#9571) @flaviendelangle
+
+### `@mui/x-charts@6.0.0-alpha.2`
+
+#### Changes
+
+- [charts] Add pie chart component (#9395) @alexfauquette
+
+### Docs
+
+- [docs] Add pickers playground (#9164) @LukasTy
+- [docs] Fix API links for pickers (#9573) @alexfauquette
+- [docs] Fix demos with `ToggleButtonGroup` (#9548) @flaviendelangle
+- [docs] Fix typos in pagination documentation page (#9332) @RatherBeLunar
+- [docs] Hide ads on paid content @oliviertassinari
+- [docs] Move the charts in the sidebar (#9437) @flaviendelangle
+- [docs] New page: Components lifecycle (#8372) @flaviendelangle
+- [docs] Remove outdated header tag @oliviertassinari
+
+### Core
+
+- [core] Fix typo in priority support @oliviertassinari
+- [core] Remove mention of Crowdin @oliviertassinari
+
+## 6.9.1
+
+_Jun 30, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add experimental API for faster filtering performance
+- 🌍 Add Chinese (Hong Kong) (zh-HK) locale on the pickers
+- 🌍 Improve Romanian (ro-RO) and Hungarian (hu-HU) translations on the pickers and the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.1` / `@mui/x-data-grid-pro@v6.9.1` / `@mui/x-data-grid-premium@v6.9.1`
+
+#### Changes
+
+- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
+- [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas
+- [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw
+- [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk
+- [DataGrid] Fix `nextFieldToFocus` to always be a visible column field when <kbd>Tab</kbd> key is pressed (#8314) @yaredtsy
+- [DataGrid] Fix `Maximum call stack size exceeded` error when using fractional width (#9516) @cherniavskii
+- [DataGridPro] Don't throw error in column pinning (#9507) @romgrk
+- [DataGridPro] Fix bug with `checkboxSelection` and treeData/grouping (#9418) @romgrk
+- [l10n] Improve Romanian (ro-RO) and Hungarian (hu-HU) translations (#9436) @noraleonte
+
+### `@mui/x-date-pickers@v6.9.1` / `@mui/x-date-pickers-pro@v6.9.1`
+
+#### Changes
+
+- [DateTimePicker] Scroll to Digital Clock section only when selection changes (#9434) @LukasTy
+- [pickers] Handle `keyDown` only when input is focused (#9481) @LukasTy
+- [pickers] Add `referenceDate` prop on `TimeClock`, `DigitalClock` and `MultiSectionDigitalClock` (#9356) @flaviendelangle
+- [l10n] Add Chinese (Hong Kong) (zh-HK) locale (#9468) @samchiu90
+- [l10n] Improve Romanian (ro-RO) translations (#9436) @noraleonte
+
+### `@mui/x-charts@6.0.0-alpha.1`
+
+#### Changes
+
+- [charts] Take responsive container from data grid (#9497) @alexfauquette
+- [charts] Update README.md (#9426) @alexfauquette
+- [charts] Fix typo and small refactor (#9526) @flaviendelangle
+
+### Docs
+
+- [docs] Add a recipe limiting to one expanded detail panel at a time (#9488) @cherniavskii
+- [docs] Add missing upcoming flag without issue (#9449) @oliviertassinari
+- [docs] Fix 301 when opening the charts @oliviertassinari
+- [docs] Fix 404 link (#9435) @alexfauquette
+- [docs] Fix `productId` logic (#9451) @oliviertassinari
+- [docs] Update charts overview.md (#9429) @brentertz
+- [docs] Avoid systematic usage of `"bg": "inline"` (#9499) @alexfauquette
+- [docs] Display plan icon in ToC (#9490) @cherniavskii
+- [docs] Remove "product" markdown header (#9517) @oliviertassinari
+
+### Core
+
+- [core] Add `edit-mode` to priority support action (#9483) @DanailH
+- [core] Fix priority support prompt action (#9472) @DanailH
+- [core] Update `uses` for priority support action (#9480) @DanailH
+- [core] Bumb update monorepo (#9476) @alexfauquette
+- [CHANGELOG] Fix media quality (#9439) @oliviertassinari
+- [CHANGELOG] Remove height img attribute @oliviertassinari
+- [test] Skip flaky row pinning tests in JSDOM (#9511) @cherniavskii
+
 ## 6.9.0
 
 _Jun 22, 2023_
 
 We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 We release a new package `@mui/x-charts`.
-  This package aims at simplifying the integration of charts into your dashboards. 📊
+- 🎁 We released a new open-source package: `@mui/x-charts`. This package aims at simplifying the integration of charts into your dashboards. 📊
+
+  <img width="512" alt="charts" src="https://github.com/mui/mui-x/assets/3165635/41201d3c-16a4-442d-a230-68356e6b433d">
+
+  It already contains [line](https://mui.com/x/react-charts/lines/), [bar](https://mui.com/x/react-charts/bars/), and [scatter](https://mui.com/x/react-charts/scatter/) charts, with basic customization features. Check out the [documentation](https://mui.com/x/react-charts/) to see what it can do, and open issues to get the feature you need implemented.
 
-  ![image](https://github.com/mui/mui-x/assets/45398769/613bae2f-537d-4ec3-8046-591d1a504a72)
+- 🚀 Introducing UTC and timezone support for pickers.
 
-  It already contains [lines](https://mui.com/x/react-charts/lines/), [bars](https://mui.com/x/react-charts/bars/), and [scatter](https://mui.com/x/react-charts/scatter/) charts with basic customization features.
-  Please, visit the new [documentation](https://mui.com/x/react-charts/) to know what it does, and open issues to get the feature you need to be implemented.
+  <img width="774" src="https://github.com/mui/mui-x/assets/3165635/ad95a404-ee67-4aff-b996-ad6cbb322348">
 
-- 🚀 Introduce the UTC and timezone support for pickers.
-  ![image](https://github.com/mui/mui-x/assets/3309670/f8b552b0-9ec2-417b-b769-95740308291d)
-  Please visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
+  Visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
 
 - 🌍 Improve Brazilian Portuguese (pt-BR) on the data grid
 - 🌍 Improve Czech (cs-CZ) locale on the pickers

package/DataGridPremium/DataGridPremium.js

@@ -740,7 +740,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   /**
    * If `true`, pagination is enabled.
    * @default false

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -62,7 +62,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridRowPinning(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef);
+  useGridParamsApi(privateApiRef, props);
   useGridDetailPanel(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);

package/README.md

@@ -7,7 +7,7 @@ It's part of MUI X, an open core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 // with npm
 npm install @mui/x-data-grid-premium
 

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { tagInternalFilter } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector } from './gridAggregationSelectors';
 import { GridFooterCell } from '../../../components/GridFooterCell';
 import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
@@ -84,19 +85,35 @@ const getWrappedFilterOperators = ({
   value: filterOperators,
   getCellAggregationResult
 }) => filterOperators.map(operator => {
-  return _extends({}, operator, {
-    getApplyFilterFn: (filterItem, column) => {
-      const originalFn = operator.getApplyFilterFn(filterItem, column);
-      if (!originalFn) {
-        return null;
+  const baseGetApplyFilterFn = operator.getApplyFilterFn;
+  const baseGetApplyFilterFnV7 = operator.getApplyFilterFnV7;
+  const getApplyFilterFn = tagInternalFilter((filterItem, colDef) => {
+    const filterFn = baseGetApplyFilterFn(filterItem, colDef);
+    if (!filterFn) {
+      return null;
+    }
+    return params => {
+      if (getCellAggregationResult(params.id, params.field) != null) {
+        return true;
       }
-      return params => {
-        if (getCellAggregationResult(params.id, params.field) != null) {
-          return true;
-        }
-        return originalFn(params);
-      };
+      return filterFn(params);
+    };
+  });
+  const getApplyFilterFnV7 = baseGetApplyFilterFnV7 === undefined ? undefined : tagInternalFilter((filterItem, colDef) => {
+    const filterFn = baseGetApplyFilterFnV7(filterItem, colDef);
+    if (!filterFn) {
+      return null;
     }
+    return (value, row, column, api) => {
+      if (getCellAggregationResult(row.id, column.field) != null) {
+        return true;
+      }
+      return filterFn(value, row, column, api);
+    };
+  });
+  return _extends({}, operator, {
+    getApplyFilterFn,
+    getApplyFilterFnV7
   });
 });
 

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useEventCallback } from '@mui/material/utils';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
@@ -13,10 +13,15 @@ export const cellSelectionStateInitializer = (state, props) => {
 function isKeyboardEvent(event) {
   return !!event.key;
 }
+const AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrolling
+const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
+
 export const useGridCellSelection = (apiRef, props) => {
   const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef();
   const lastMouseDownCell = React.useRef();
+  const mousePosition = React.useRef(null);
+  const autoScrollRAF = React.useRef();
   const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -113,8 +118,16 @@ export const useGridCellSelection = (apiRef, props) => {
     }
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
-  const handleCellMouseDown = React.useCallback((params, event) => {
+  const handleMouseUp = useEventCallback(() => {
     var _apiRef$current$rootE, _apiRef$current$rootE2;
+    lastMouseDownCell.current = null;
+    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.remove(gridClasses['root--disableUserSelection']);
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopAutoScroll();
+  });
+  const handleCellMouseDown = React.useCallback((params, event) => {
+    var _apiRef$current$rootE3, _apiRef$current$rootE4, _apiRef$current$rootE5;
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
     const isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -129,20 +142,86 @@ export const useGridCellSelection = (apiRef, props) => {
       id: params.id,
       field: params.field
     };
-    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
-  }, [apiRef, hasClickedValidCellForRangeSelection]);
-  const handleCellMouseUp = React.useCallback(() => {
-    var _apiRef$current$rootE3, _apiRef$current$rootE4;
-    lastMouseDownCell.current = null;
-    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.remove(gridClasses['root--disableUserSelection']);
-  }, [apiRef]);
+    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.add(gridClasses['root--disableUserSelection']);
+    const document = ownerDocument((_apiRef$current$rootE5 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE5.current);
+    document.addEventListener('mouseup', handleMouseUp, {
+      once: true
+    });
+  }, [apiRef, handleMouseUp, hasClickedValidCellForRangeSelection]);
+  const stopAutoScroll = React.useCallback(() => {
+    if (autoScrollRAF.current) {
+      cancelAnimationFrame(autoScrollRAF.current);
+      autoScrollRAF.current = null;
+    }
+  }, []);
   const handleCellFocusIn = React.useCallback(params => {
     cellWithVirtualFocus.current = {
       id: params.id,
       field: params.field
     };
   }, []);
+  const startAutoScroll = React.useCallback(() => {
+    var _apiRef$current$virtu, _apiRef$current$virtu2, _apiRef$current$virtu3;
+    if (autoScrollRAF.current) {
+      return;
+    }
+    if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
+      return;
+    }
+    const virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu3 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    function autoScroll() {
+      var _apiRef$current$virtu4;
+      if (!mousePosition.current || !((_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu4.current)) {
+        return;
+      }
+      const {
+        x: mouseX,
+        y: mouseY
+      } = mousePosition.current;
+      const {
+        height,
+        width
+      } = virtualScrollerRect;
+      let deltaX = 0;
+      let deltaY = 0;
+      let factor = 0;
+      const dimensions = apiRef.current.getRootDimensions();
+      if (mouseY <= AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollY) {
+        // When scrolling up, the multiplier increases going closer to the top edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseY) / -AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseY >= height - AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollY) {
+        // When scrolling down, the multiplier increases going closer to the bottom edge
+        factor = (mouseY - (height - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseX <= AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollX) {
+        // When scrolling left, the multiplier increases going closer to the left edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseX) / -AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      } else if (mouseX >= width - AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollX) {
+        // When scrolling right, the multiplier increases going closer to the right edge
+        factor = (mouseX - (width - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        const {
+          scrollLeft,
+          scrollTop
+        } = apiRef.current.virtualScrollerRef.current;
+        apiRef.current.scroll({
+          top: scrollTop + deltaY * factor,
+          left: scrollLeft + deltaX * factor
+        });
+      }
+      autoScrollRAF.current = requestAnimationFrame(autoScroll);
+    }
+    autoScroll();
+  }, [apiRef]);
   const handleCellMouseOver = React.useCallback((params, event) => {
+    var _apiRef$current$virtu5, _apiRef$current$virtu6;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -154,7 +233,33 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-  }, [apiRef]);
+    const virtualScrollerRect = (_apiRef$current$virtu5 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu6 = _apiRef$current$virtu5.current) == null ? void 0 : _apiRef$current$virtu6.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    const {
+      height,
+      width,
+      x,
+      y
+    } = virtualScrollerRect;
+    const mouseX = event.clientX - x;
+    const mouseY = event.clientY - y;
+    mousePosition.current = {
+      x: mouseX,
+      y: mouseY
+    };
+    const hasEnteredVerticalSensitivityArea = mouseY <= AUTO_SCROLL_SENSITIVITY || mouseY >= height - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredHorizontalSensitivityArea = mouseX <= AUTO_SCROLL_SENSITIVITY || mouseX >= width - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredSensitivityArea = hasEnteredVerticalSensitivityArea || hasEnteredHorizontalSensitivityArea;
+    if (hasEnteredSensitivityArea) {
+      // Mouse has entered the sensitity area for the first time
+      startAutoScroll();
+    } else {
+      // Mouse has left the sensitivity area while auto scroll is on
+      stopAutoScroll();
+    }
+  }, [apiRef, startAutoScroll, stopAutoScroll]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -225,6 +330,10 @@ export const useGridCellSelection = (apiRef, props) => {
       id: visibleRows.rows[endRowIndex].id,
       field: visibleColumns[endColumnIndex].field
     };
+    apiRef.current.scrollToIndexes({
+      rowIndex: endRowIndex,
+      colIndex: endColumnIndex
+    });
     const {
       id,
       field
@@ -238,13 +347,21 @@ export const useGridCellSelection = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfCellSelectionIsEnabled(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfCellSelectionIsEnabled(handleCellKeyDown));
   useGridApiEventHandler(apiRef, 'cellMouseDown', runIfCellSelectionIsEnabled(handleCellMouseDown));
-  useGridApiEventHandler(apiRef, 'cellMouseUp', runIfCellSelectionIsEnabled(handleCellMouseUp));
   useGridApiEventHandler(apiRef, 'cellMouseOver', runIfCellSelectionIsEnabled(handleCellMouseOver));
   React.useEffect(() => {
     if (props.unstable_cellSelectionModel) {
       apiRef.current.unstable_setCellSelectionModel(props.unstable_cellSelectionModel);
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
+  React.useEffect(() => {
+    var _apiRef$current$rootE6;
+    const rootRef = (_apiRef$current$rootE6 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE6.current;
+    return () => {
+      stopAutoScroll();
+      const document = ownerDocument(rootRef);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [apiRef, handleMouseUp, stopAutoScroll]);
   const checkIfCellIsSelected = React.useCallback((isSelected, {
     id,
     field

package/hooks/features/export/serializer/excelSerializer.js

@@ -103,7 +103,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
         {
           // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
           // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
-          // About Date.UTC(): https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
+          // About Date.UTC(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
           const value = api.getCellParams(id, column.field).value;
           // value may be `undefined` in auto-generated grouping rows
           if (!value) {
@@ -151,7 +151,7 @@ export const serializeColumn = (column, columnsStyles) => {
     headerText: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
     // Excel width must stay between 0 and 255 (https://support.microsoft.com/en-us/office/change-the-column-width-and-row-height-72f5e3cc-994d-43e8-ae58-9774a0905f46)
     // From the example of column width behavior (https://docs.microsoft.com/en-US/office/troubleshoot/excel/determine-column-widths#example-of-column-width-behavior)
-    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the the font-size
+    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the font-size
     width: Math.min(255, column.width ? column.width / 7.5 : 8.43),
     style: _extends({}, type && (defaultColumnsStyles == null ? void 0 : defaultColumnsStyles[type]), columnsStyles == null ? void 0 : columnsStyles[field])
   };

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -45,23 +45,13 @@ const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
   return 1;
 };
 const getLeafProperties = leafColDef => {
-  var _leafColDef$headerNam, _leafColDef$filterOpe;
+  var _leafColDef$headerNam;
   return {
     headerName: (_leafColDef$headerNam = leafColDef.headerName) != null ? _leafColDef$headerNam : leafColDef.field,
     sortable: leafColDef.sortable,
     filterable: leafColDef.filterable,
     valueOptions: isSingleSelectColDef(leafColDef) ? leafColDef.valueOptions : undefined,
-    filterOperators: (_leafColDef$filterOpe = leafColDef.filterOperators) == null ? void 0 : _leafColDef$filterOpe.map(operator => _extends({}, operator, {
-      getApplyFilterFn: (filterItem, column) => {
-        const originalFn = operator.getApplyFilterFn(filterItem, column);
-        if (!originalFn) {
-          return null;
-        }
-        return params => {
-          return originalFn(params);
-        };
-      }
-    })),
+    filterOperators: leafColDef.filterOperators,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the leaves
       if (cellParams1.rowNode.type === 'leaf' && cellParams2.rowNode.type === 'leaf') {
@@ -72,7 +62,6 @@ const getLeafProperties = leafColDef => {
   };
 };
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
-  var _groupedByColDef$filt;
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
@@ -84,17 +73,7 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
       }
       return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
     },
-    filterOperators: (_groupedByColDef$filt = groupedByColDef.filterOperators) == null ? void 0 : _groupedByColDef$filt.map(operator => _extends({}, operator, {
-      getApplyFilterFn: (filterItem, column) => {
-        const originalFn = operator.getApplyFilterFn(filterItem, column);
-        if (!originalFn) {
-          return null;
-        }
-        return params => {
-          return originalFn(params);
-        };
-      }
-    }))
+    filterOperators: groupedByColDef.filterOperators
   };
   if (applyHeaderName) {
     var _groupedByColDef$head;

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -36,6 +36,7 @@ const shouldApplyFilterItemOnGroup = (columnField, node) => {
  */
 export const filterRowTreeFromGroupingColumns = params => {
   const {
+    apiRef,
     rowTree,
     isRowMatchingFilters,
     filterModel
@@ -44,14 +45,15 @@ export const filterRowTreeFromGroupingColumns = params => {
   const filteredDescendantCountLookup = {};
   const filterCache = {};
   const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
-    let isPassingFiltering = false;
-    let filterResults = {
+    const filterResults = {
       passingFilterItems: null,
       passingQuickFilterValues: null
     };
+    let isPassingFiltering = false;
     if (isRowMatchingFilters && node.type !== 'footer') {
       const shouldApplyItem = node.type === 'group' && node.isAutoGenerated ? columnField => shouldApplyFilterItemOnGroup(columnField, node) : undefined;
-      filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+      const row = apiRef.current.getRow(node.id);
+      isRowMatchingFilters(row, shouldApplyItem, filterResults);
     } else {
       isPassingFiltering = true;
     }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.9.0
+ * @mui/x-data-grid-premium v6.9.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/DataGridPremium/DataGridPremium.js

@@ -740,7 +740,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   /**
    * If `true`, pagination is enabled.
    * @default false

package/legacy/DataGridPremium/useDataGridPremiumComponent.js

@@ -62,7 +62,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
   useGridRowPinning(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef);
+  useGridParamsApi(privateApiRef, props);
   useGridDetailPanel(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);

package/legacy/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { tagInternalFilter } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector } from './gridAggregationSelectors';
 import { GridFooterCell } from '../../../components/GridFooterCell';
 import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
@@ -82,19 +83,35 @@ var getWrappedFilterOperators = function getWrappedFilterOperators(_ref4) {
   var filterOperators = _ref4.value,
     getCellAggregationResult = _ref4.getCellAggregationResult;
   return filterOperators.map(function (operator) {
-    return _extends({}, operator, {
-      getApplyFilterFn: function getApplyFilterFn(filterItem, column) {
-        var originalFn = operator.getApplyFilterFn(filterItem, column);
-        if (!originalFn) {
-          return null;
+    var baseGetApplyFilterFn = operator.getApplyFilterFn;
+    var baseGetApplyFilterFnV7 = operator.getApplyFilterFnV7;
+    var getApplyFilterFn = tagInternalFilter(function (filterItem, colDef) {
+      var filterFn = baseGetApplyFilterFn(filterItem, colDef);
+      if (!filterFn) {
+        return null;
+      }
+      return function (params) {
+        if (getCellAggregationResult(params.id, params.field) != null) {
+          return true;
         }
-        return function (params) {
-          if (getCellAggregationResult(params.id, params.field) != null) {
-            return true;
-          }
-          return originalFn(params);
-        };
+        return filterFn(params);
+      };
+    });
+    var getApplyFilterFnV7 = baseGetApplyFilterFnV7 === undefined ? undefined : tagInternalFilter(function (filterItem, colDef) {
+      var filterFn = baseGetApplyFilterFnV7(filterItem, colDef);
+      if (!filterFn) {
+        return null;
       }
+      return function (value, row, column, api) {
+        if (getCellAggregationResult(row.id, column.field) != null) {
+          return true;
+        }
+        return filterFn(value, row, column, api);
+      };
+    });
+    return _extends({}, operator, {
+      getApplyFilterFn: getApplyFilterFn,
+      getApplyFilterFnV7: getApplyFilterFnV7
     });
   });
 };