@mui/x-data-grid 8.5.1 → 8.5.3

package/CHANGELOG.md

@@ -5,6 +5,193 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.3
+
+_Jun 19, 2025_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @arminmeh, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.3`
+
+- [DataGrid] Fix export menu button tooltip being interactive when menu is open (#18327) @bernardobelchior
+- [DataGrid] Fix column menu scroll close (#18065) @alisasanib
+- [DataGrid] Fix page size issue with data source (#18419) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.3`, plus:
+
+- [DataGridPro] Ignore missing `rowCount` response when new children are fetched with the data source (#17711) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.3`
+
+- [pickers] Add `inputSizeSmall` to classes interface (#18242) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.3`
+
+- [charts] Add item class to list item around each series in legend (#18411) @bernardobelchior
+- [charts] Allow `tabIndex` in surface and legend (#18344) @JCQuintas
+- [charts] Explore selector typing (#18362) @alexfauquette
+- [charts] Fix highlight with number ids (#18423) @alexfauquette
+- [charts] Make scatter chart use data attributes (#18048) @alexfauquette
+
+#### `@mui/x-charts-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.3`, plus:
+
+- [charts-pro] Add data-series to elements of funnel chart (#18067) @JCQuintas
+- [charts-pro] Hide values outside minStart and maxEnd in zoom slider (#18336) @bernardobelchior
+- [charts-pro] Fix `FunnelChart` label positioning with different curves (#18354) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.5.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix 404 in charts docs (#18440) @alexfauquette
+- [docs][pickers] Fix adapter version resolving when opening demo to edit (#18363) @LukasTy
+
+### Core
+
+- [core] Fix pnpm valelint error (#18420) @oliviertassinari
+
+### Miscellaneous
+
+- [code-infra] Add back a `Playwright` renovate group (#18397) @LukasTy
+- [code-infra] Setup `CODEOWNERS` for charts repositories (#18418) @JCQuintas
+- [code-infra] Strengthen `URL` usage for test config (#18444) @LukasTy
+- [code-infra] Use `vitest` bundled types (#17758) @JCQuintas
+- [infra] Stabilise tests by removing babel and plugins from vitest (#18341) @JCQuintas
+- [infra] Add automated release PR creation script (#18345) @michelengelen
+
+## 8.5.2
+
+_Jun 12, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Improve Data Grid selectors performance
+- 🐞 Fix `useSyncExternalStore` import error in React 17
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @noobyogi0010.
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari, @prakhargupta1, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.2`
+
+- [DataGrid] Improve selectors performance (#18234) @romgrk
+- [DataGrid] Fix data grid palette when using CSS vars (#18310) @KenanYusuf
+- [DataGrid] Ignore data source request if the grid got unmounted (#18268) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.2`, plus:
+
+- [DataGridPro] Fix flex column width if it is a pinned column (#18293) @alisasanib
+- [DataGridPro] Fix inconsistent filtering results with aggregation (#17954) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.5.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.2`
+
+- [pickers] Add `PickerDay2` and `DateRangePickerDay2` components (#15921) @noraleonte
+- [pickers] Fix `hiddenLabel` prop propagation (#18195) @noobyogi0010
+
+#### `@mui/x-date-pickers-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.2`
+
+- [charts] Add a default value formatter for continuous scales (#18178) @bernardobelchior
+- [charts] Add margin-bottom to charts toolbar (#18326) @bernardobelchior
+- [charts] Fix grid with band scale (#18295) @alexfauquette
+- [charts] Remove unnecessary style changes in tests (#18317) @JCQuintas
+- [charts] Remove `sx` prop merging from `useComponentRenderer` (#18235) @bernardobelchior
+- [charts] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.2`, plus:
+
+- [charts-pro] Document zoom slider tooltip value formatting (#18261) @bernardobelchior
+- [charts-pro] Funnel `gap` prop does not impact the drawing area (#18233) @JCQuintas
+- [charts-pro] Use `ChartsToolbarPro` types in pro charts (#18243) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.2`
+
+- [tree-view] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-tree-view-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.2`.
+
+### Docs
+
+- [docs] Add toolbar custom trigger and panel recipe (#18297) @KenanYusuf
+- [docs] Copyedit the Priority support page (#18311) @mapache-salvaje
+- [docs] Remove confusing opt-out mention in telemetry docs (#18257) @prakhargupta1
+- [docs] Revise the Master Detail doc (#17927) @mapache-salvaje
+- [docs] Revise the list view doc (#17928) @mapache-salvaje
+- [docs] Audit and revise the Pro column docs (#17844) @mapache-salvaje
+- [docs] Add some more context on Heatmap (#18256) @oliviertassinari
+- [x-telemetry] Reduce Telemetry overhead (#18292) @oliviertassinari
+- [code-infra] Align Node version used in CI to v22 (#18319) @LukasTy
+- [code-infra] Fix pkg.pr.new publishing (#18316) @bernardobelchior
+- [code-infra] Revert `React` to `19.0.0` (#18265) @LukasTy
+- [code-infra] Use `catalog` for reused dependencies (#18302) @LukasTy
+- [infra] Remove unused karma/mocha deps and files (#18340) @JCQuintas
+- [infra] Update GitHub label references to use 'scope' instead of 'component' (#18260) @michelengelen
+- [infra] Use a single browser server in CI (#18230) @JCQuintas
+
 ## 8.5.1
 
 <!-- generated comparing v8.5.0..master -->
@@ -97,15 +284,6 @@ Same changes as in `@mui/x-tree-view@8.5.1`.
 
 ### Core
 
-- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
-- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
-- chore(deps): bump babel (#18157) @renovate[bot]
-- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
-- chore(deps): bump material ui (#17802) @renovate[bot]
-- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
-- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
-- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
-- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
 - [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
 - [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
 - [code-infra] Remove `istanbul` references (#18194) @JCQuintas
@@ -4549,7 +4727,6 @@ No changes since `@mui/x-charts@7.22.2`.
 - [docs] Add `next` version links (#15423) @LukasTy
 - [docs] Use the `loading` state in the demos (#15538) @cherniavskii
 - [docs] Add data caching to lazy loaded detail panel demo (#15506) @cherniavskii
-
 - [code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
 - [docs-infra] Transpile `.ts` demo files (#15421) @KenanYusuf
 - [core] Clarify release version bump strategy (#15536) @cherniavskii

package/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,4 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export 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>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -22,6 +22,12 @@ const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "child
 const StyledMenuList = (0, _styles.styled)(_assert.NotRendered)(() => ({
   minWidth: 248
 }));
+function handleMenuScrollCapture(event) {
+  if (!event.currentTarget.contains(event.target)) {
+    return;
+  }
+  event.stopPropagation();
+}
 const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRef.forwardRef)(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
@@ -47,6 +53,8 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRe
     className: (0, _clsx.default)(_gridClasses.gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
+    onWheel: handleMenuScrollCapture,
+    onTouchMove: handleMenuScrollCapture,
     autoFocus: open
   }, other, {
     ref: ref,

package/components/toolbarV8/GridToolbar.js

@@ -131,6 +131,7 @@ function GridToolbar(props) {
     }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
+        disableInteractive: exportMenuOpen,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
           ref: exportMenuTriggerRef,
           id: exportMenuTriggerId,

package/components/toolbarV8/Toolbar.d.ts

@@ -6,7 +6,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/esm/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,4 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export 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>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;

package/esm/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -14,6 +14,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(NotRendered)(() => ({
   minWidth: 248
 }));
+function handleMenuScrollCapture(event) {
+  if (!event.currentTarget.contains(event.target)) {
+    return;
+  }
+  event.stopPropagation();
+}
 const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
@@ -39,6 +45,8 @@ const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(prop
     className: clsx(gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
+    onWheel: handleMenuScrollCapture,
+    onTouchMove: handleMenuScrollCapture,
     autoFocus: open
   }, other, {
     ref: ref,

package/esm/components/toolbarV8/GridToolbar.js

@@ -121,6 +121,7 @@ function GridToolbar(props) {
     }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
+        disableInteractive: exportMenuOpen,
         children: /*#__PURE__*/_jsx(ToolbarButton, {
           ref: exportMenuTriggerRef,
           id: exportMenuTriggerId,

package/esm/components/toolbarV8/Toolbar.d.ts

@@ -6,7 +6,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/esm/hooks/core/useGridApiInitialization.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EventManager } from '@mui/x-internals/EventManager';
-import { Store } from "../../utils/Store.js";
+import { Store } from '@mui/x-internals/store';
 import { useGridApiMethod } from "../utils/useGridApiMethod.js";
 import { GridSignature } from "../../constants/signature.js";
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');

package/esm/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -4,9 +4,17 @@ import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
  * @ignore - do not document.
  */
 export declare const gridColumnGroupingSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnsGroupingState>;
-export declare const gridColumnGroupsUnwrappedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, {
+export declare const gridColumnGroupsUnwrappedModelSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
   [columnField: string]: string[];
-}>;
-export declare const gridColumnGroupsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces.js").GridColumnGroupLookup>;
-export declare const gridColumnGroupsHeaderStructureSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces.js").GridGroupingStructure[][]>;
-export declare const gridColumnGroupsHeaderMaxDepthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, number>;
+};
+export declare const gridColumnGroupsLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("./gridColumnGroupsInterfaces.js").GridColumnGroupLookup;
+export declare const gridColumnGroupsHeaderStructureSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("./gridColumnGroupsInterfaces.js").GridGroupingStructure[][];
+export declare const gridColumnGroupsHeaderMaxDepthSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -31,7 +31,7 @@ export interface GetHeadersParams {
 type OwnerState = DataGridProcessedProps;
 export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
   renderContext: GridColumnsRenderContext;
   leftRenderContext: {

package/esm/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -1,3 +1,5 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 export declare const gridColumnResizeSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnResizeState>;
-export declare const gridResizingColumnFieldSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnResizeState, string>;
+export declare const gridResizingColumnFieldSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => string;

package/esm/hooks/features/columns/gridColumnsSelector.d.ts

@@ -9,40 +9,54 @@ export declare const gridColumnsStateSelector: import("@mui/x-data-grid").Output
  * Get an array of column fields in the order rendered on screen.
  * @category Columns
  */
-export declare const gridColumnFieldsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, string[]>;
+export declare const gridColumnFieldsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => string[];
 /**
  * Get the columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, GridColumnLookup>;
+export declare const gridColumnLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridColumnLookup;
 /**
  * Get an array of column definitions in the order rendered on screen..
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals/index.js").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("../../../internals/index.js").GridStateColDef[];
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridColumnVisibilityModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, import("@mui/x-data-grid").GridColumnVisibilityModel>;
+export declare const gridColumnVisibilityModelSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridColumnVisibilityModel;
 /**
  * Get the "initial" column visibility model, containing the visibility status of each column.
  * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridInitialColumnVisibilityModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, import("@mui/x-data-grid").GridColumnVisibilityModel>;
+export declare const gridInitialColumnVisibilityModelSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridColumnVisibilityModel;
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnVisibilityModel, import("../../../internals/index.js").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("../../../internals/index.js").GridStateColDef[];
 /**
  * Get the field of each visible column.
  * @category Visible Columns
  */
-export declare const gridVisibleColumnFieldsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals/index.js").GridStateColDef[], string[]>;
+export declare const gridVisibleColumnFieldsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => string[];
 /**
  * Get the visible pinned columns model.
  * @category Visible Columns
@@ -53,36 +67,48 @@ export declare const gridPinnedColumnsSelector: import("@mui/x-data-grid").Outpu
  * @category Pinned Columns
  * @ignore - Do not document
  */
-export declare const gridExistingPinnedColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, boolean, {
+export declare const gridExistingPinnedColumnSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
   left: string[];
   right: string[];
-}>;
+};
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export declare const gridVisiblePinnedColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, boolean, {
+export declare const gridVisiblePinnedColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
   left: import("../../../internals/index.js").GridStateColDef[];
   right: import("../../../internals/index.js").GridStateColDef[];
-}>;
+};
 /**
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns
  */
-export declare const gridColumnPositionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals/index.js").GridStateColDef[], number[]>;
+export declare const gridColumnPositionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number[];
 /**
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals/index.js").GridStateColDef[], import("../../../internals/index.js").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("../../../internals/index.js").GridStateColDef[];
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridFilterableColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals/index.js").GridStateColDef[], GridColumnLookup>;
+export declare const gridFilterableColumnLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridColumnLookup;
 /**
  * Checks if some column has a colSpan field.
  * @category Columns
  * @ignore - Do not document
  */
-export declare const gridHasColSpanSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals/index.js").GridStateColDef[], boolean>;
+export declare const gridHasColSpanSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -153,7 +153,9 @@ export const hydrateColumnsWidth = (rawState, dimensions) => {
       flexColumns
     });
     Object.keys(computedColumnWidths).forEach(field => {
-      columnsLookup[field].computedWidth = computedColumnWidths[field].computedWidth;
+      columnsLookup[field] = _extends({}, columnsLookup[field], {
+        computedWidth: computedColumnWidths[field].computedWidth
+      });
     });
   }
   return _extends({}, rawState, {

package/esm/hooks/features/dataSource/gridDataSourceSelector.d.ts

@@ -1,8 +1,10 @@
-export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, import("@mui/x-data-grid").GridPaginationModel, {
+export declare const gridGetRowsParamsSelector: (args_0: import("react").RefObject<{
+  state: import("../../../models/gridStateCommunity.js").GridStateCommunity;
+} | null>) => {
   groupKeys: never[];
   paginationModel: import("@mui/x-data-grid").GridPaginationModel;
   sortModel: import("@mui/x-data-grid").GridSortModel;
   filterModel: import("@mui/x-data-grid").GridFilterModel;
   start: number;
   end: number;
-}>;
+};

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -173,6 +173,10 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
+    return () => {
+      // ignore the current request on unmount
+      lastRequestId.current += 1;
+    };
   }, [apiRef, props.dataSource]);
   return {
     api: {

package/esm/hooks/features/dataSource/utils.js

@@ -26,7 +26,7 @@ export class CacheChunkManager {
 
       // split the range into chunks
       const chunkedKeys = [];
-      for (let i = key.start; i < key.end; i += this.chunkSize) {
+      for (let i = key.start; i <= key.end; i += this.chunkSize) {
         const end = Math.min(i + this.chunkSize - 1, key.end);
         chunkedKeys.push(_extends({}, key, {
           start: i,

package/esm/hooks/features/density/densitySelector.d.ts

@@ -3,4 +3,6 @@ import { GridDensity } from "../../../models/gridDensity.js";
 export declare const COMPACT_DENSITY_FACTOR = 0.7;
 export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
 export declare const gridDensitySelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridDensity>;
-export declare const gridDensityFactorSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridDensity, number>;
+export declare const gridDensityFactorSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;

package/esm/hooks/features/dimensions/gridDimensionsSelectors.d.ts

@@ -4,15 +4,39 @@ export declare const gridDimensionsSelector: import("@mui/x-data-grid").OutputSe
  * Get the summed width of all the visible columns.
  * @category Visible Columns
  */
-export declare const gridColumnsTotalWidthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridRowHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridContentHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridHasScrollXSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, boolean>;
-export declare const gridHasScrollYSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, boolean>;
-export declare const gridHasFillerSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, boolean>;
-export declare const gridHeaderHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridGroupHeaderHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridHeaderFilterHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridHorizontalScrollbarHeightSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridVerticalScrollbarWidthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridDimensions, number>;
-export declare const gridHasBottomFillerSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, number, boolean>;
+export declare const gridColumnsTotalWidthSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridRowHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridContentHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHasScrollXSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+export declare const gridHasScrollYSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+export declare const gridHasFillerSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+export declare const gridHeaderHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridGroupHeaderHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHeaderFilterHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHorizontalScrollbarHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridVerticalScrollbarWidthSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHasBottomFillerSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;

package/esm/hooks/features/editing/gridEditingSelectors.d.ts

@@ -5,11 +5,15 @@ import { GridEditMode } from "../../../models/gridEditRowModel.js";
  * Select the row editing state.
  */
 export declare const gridEditRowsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridEditingState>;
-export declare const gridRowIsEditingSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
+export declare const gridRowIsEditingSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>, args_1: {
   rowId: GridRowId;
   editMode: GridEditMode;
-}, boolean>;
-export declare const gridEditCellStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
+}) => boolean;
+export declare const gridEditCellStateSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>, args_1: {
   rowId: GridRowId;
   field: string;
-}, import("@mui/x-data-grid").GridEditCellProps<any>>;
+}) => import("@mui/x-data-grid").GridEditCellProps<any>;