@mui/x-data-grid 8.5.1 → 8.5.3

package/esm/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -10,27 +10,37 @@ export declare const gridVirtualizationSelector: import("@mui/x-data-grid").Outp
  * @category Virtualization
  * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
  */
-export declare const gridVirtualizationEnabledSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, boolean>;
+export declare const gridVirtualizationEnabledSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
 /**
  * Get the enabled state for column virtualization
  * @category Virtualization
  */
-export declare const gridVirtualizationColumnEnabledSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, boolean>;
+export declare const gridVirtualizationColumnEnabledSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
 /**
  * Get the enabled state for row virtualization
  * @category Virtualization
  */
-export declare const gridVirtualizationRowEnabledSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, boolean>;
+export declare const gridVirtualizationRowEnabledSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
 /**
  * Get the render context
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, import("@mui/x-data-grid").GridRenderContext>;
+export declare const gridRenderContextSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridRenderContext;
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, number, GridColumnsRenderContext>;
+export declare const gridRenderContextColumnsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridColumnsRenderContext;

package/esm/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -30,6 +30,8 @@ export const gridVirtualizationRowEnabledSelector = createSelector(gridVirtualiz
  * @ignore - do not document.
  */
 export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
+const firstColumnIndexSelector = createRootSelector(state => state.virtualization.renderContext.firstColumnIndex);
+const lastColumnIndexSelector = createRootSelector(state => state.virtualization.renderContext.lastColumnIndex);
 
 /**
  * Get the render context, with only columns filled in.
@@ -37,7 +39,7 @@ export const gridRenderContextSelector = createSelector(gridVirtualizationSelect
  * @category Virtualization
  * @ignore - do not document.
  */
-export const gridRenderContextColumnsSelector = createSelectorMemoized(apiRef => apiRef.current.state.virtualization.renderContext.firstColumnIndex, apiRef => apiRef.current.state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
+export const gridRenderContextColumnsSelector = createSelectorMemoized(firstColumnIndexSelector, lastColumnIndexSelector, (firstColumnIndex, lastColumnIndex) => ({
   firstColumnIndex,
   lastColumnIndex
 }));

package/esm/hooks/utils/useGridSelector.d.ts

@@ -1,8 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
 import type { GridApiCommon } from "../../models/api/gridApiCommon.js";
-import type { OutputSelector } from "../../utils/createSelector.js";
-type Selector<Api extends GridApiCommon, Args, T> = ((apiRef: RefObject<Api>) => T) | ((apiRef: RefObject<Api | null>) => T) | OutputSelector<Api['state'], Args, T>;
 export declare const objectShallowCompare: (a: unknown, b: unknown) => boolean;
 export declare const argsEqual: (prev: any, curr: any) => boolean;
-export declare const useGridSelector: <Api extends GridApiCommon, Args, T>(apiRef: RefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: <U = T>(a: U, b: U) => boolean) => T;
-export {};
+export declare function useGridSelector<Api extends GridApiCommon, T>(apiRef: RefObject<Api>, selector: (apiRef: RefObject<Api>) => T, args?: undefined, equals?: <U = T>(a: U, b: U) => boolean): T;
+export declare function useGridSelector<Api extends GridApiCommon, T, Args>(apiRef: RefObject<Api>, selector: (apiRef: RefObject<Api>, a1: Args) => T, args: Args, equals?: <U = T>(a: U, b: U) => boolean): T;

package/esm/hooks/utils/useGridSelector.js

@@ -28,7 +28,7 @@ const createRefs = () => ({
 });
 const EMPTY = [];
 const emptyGetSnapshot = () => null;
-export const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+export function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -77,4 +77,4 @@ export const useGridSelector = (apiRef, selector, args = undefined, equals = def
   }, EMPTY);
   useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
-};
+}

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.5.1
+ * @mui/x-data-grid v8.5.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/demo/TailwindDemoContainer.d.ts

@@ -7,5 +7,5 @@ interface TailwindDemoContainerProps {
  * WARNING: This is an internal component used in documentation to inject the Tailwind script.
  * Please do not use it in your application.
  */
-export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 export {};

package/esm/material/variables.js

@@ -16,8 +16,7 @@ export function useMaterialCSSVariables() {
 }
 function transformTheme(t) {
   const borderColor = getBorderColor(t);
-  const dataGridPalette = t.palette.DataGrid; // FIXME: docs typecheck error
-
+  const dataGridPalette = (t.vars || t).palette.DataGrid;
   const backgroundBase = dataGridPalette?.bg ?? (t.vars || t).palette.background.default;
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;

package/esm/models/api/gridCoreApi.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { EventManager, EventListenerOptions } from '@mui/x-internals/EventManager';
+import type { Store } from '@mui/x-internals/store';
 import type { GridEventPublisher, GridEventListener, GridEvents } from "../events/index.js";
-import { Store } from "../../utils/Store.js";
 import type { GridApiCaches } from "../gridApiCaches.js";
 import type { GridApiCommon, GridPrivateApiCommon } from "./gridApiCommon.js";
 import type { DataGridProcessedProps } from "../props/DataGridProps.js";

package/esm/models/gridBaseSlots.d.ts

@@ -267,6 +267,7 @@ export type TooltipProps = CommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;
+  disableInteractive?: boolean;
 };
 export type IconProps = CommonProps<SVGSVGElement> & {
   fontSize?: 'small' | 'medium' | 'large' | 'inherit';

package/esm/models/gridCellClass.d.ts

@@ -2,6 +2,8 @@ import { GridValidRowModel } from "./gridRows.js";
 import { GridCellParams } from "./params/gridCellParams.js";
 /**
  * A function used to process cellClassName params.
+ * @param {GridCellParams<R, V>} params The parameters of the cell.
+ * @returns {string} The class name to be added to the cell.
  */
 export type GridCellClassFn<R extends GridValidRowModel = any, V = unknown> = (params: GridCellParams<R, V>) => string;
 /**

package/esm/models/gridColumnGrouping.d.ts

@@ -7,6 +7,8 @@ export type GridColumnNode = GridColumnGroup | GridLeafColumn;
 export declare function isLeaf(node: GridColumnNode): node is GridLeafColumn;
 /**
  * A function used to process headerClassName params.
+ * @param {GridColumnGroupHeaderParams} params The parameters of the column group header.
+ * @returns {string} The class name to be added to the column group header cell.
  */
 export type GridColumnGroupHeaderClassFn = (params: GridColumnGroupHeaderParams) => string;
 /**

package/esm/models/gridColumnGrouping.js

@@ -4,6 +4,8 @@ export function isLeaf(node) {
 
 /**
  * A function used to process headerClassName params.
+ * @param {GridColumnGroupHeaderParams} params The parameters of the column group header.
+ * @returns {string} The class name to be added to the column group header cell.
  */
 
 /**

package/esm/models/gridColumnHeaderClass.d.ts

@@ -1,6 +1,8 @@
 import { GridColumnHeaderParams } from "./params/gridColumnHeaderParams.js";
 /**
  * A function used to process headerClassName params.
+ * @param {GridColumnHeaderParams} params The parameters of the column header.
+ * @returns {string} The class name to be added to the column header cell.
  */
 export type GridColumnHeaderClassFn = (params: GridColumnHeaderParams) => string;
 /**

package/esm/models/gridRows.d.ts

@@ -173,6 +173,8 @@ export interface GridRowEntry<R extends GridValidRowModel = GridValidRowModel> {
 }
 /**
  * The function to retrieve the id of a [[GridRowModel]].
+ * @param {R} row The row model.
+ * @returns {GridRowId} The id of the row.
  */
 export type GridRowIdGetter<R extends GridValidRowModel = GridValidRowModel> = (row: R) => GridRowId;
 export {};

package/esm/models/gridSortModel.d.ts

@@ -9,6 +9,11 @@ export interface GridSortCellParams<V = any> {
 }
 /**
  * The type of the sort comparison function.
+ * @param {V} v1 The first value to compare.
+ * @param {V} v2 The second value to compare.
+ * @param {GridSortCellParams<V>} cellParams1 The parameters of the first cell.
+ * @param {GridSortCellParams<V>} cellParams2 The parameters of the second cell.
+ * @returns {number} The result of the comparison.
  */
 export type GridComparatorFn<V = any> = (v1: V, v2: V, cellParams1: GridSortCellParams<V>, cellParams2: GridSortCellParams<V>) => number;
 /**

package/esm/models/params/gridRowParams.d.ts

@@ -3,7 +3,7 @@ import type { GridColDef } from "../colDef/gridColDef.js";
 /**
  * Object passed as parameter in the row callbacks.
  * @demos
- *   - [Master detail](/x/react-data-grid/master-detail/)
+ *   - [Master-detail row panels](/x/react-data-grid/master-detail/)
  */
 export interface GridRowParams<R extends GridValidRowModel = any> {
   /**

package/esm/models/params/gridRowParams.js

@@ -1,7 +1,7 @@
 /**
  * Object passed as parameter in the row callbacks.
  * @demos
- *   - [Master detail](/x/react-data-grid/master-detail/)
+ *   - [Master-detail row panels](/x/react-data-grid/master-detail/)
  */
 /**
  * Object passed as parameter in the row `getRowClassName` callback prop.

package/esm/utils/createSelector.d.ts

@@ -1,23 +1,15 @@
 import { RefObject } from '@mui/x-internals/types';
-import { Selector, SelectorResultArray } from 'reselect';
+import { CreateSelectorFunction } from '@mui/x-internals/store';
 export interface OutputSelector<State, Args, Result> {
   (apiRef: RefObject<{
     state: State;
   } | null>, args?: Args): Result;
 }
-type StateFromSelector<T> = T extends ((first: infer F, ...args: any[]) => any) ? F extends RefObject<{
-  state: infer F2;
-} | null> ? F2 : F : never;
-type StateFromSelectorList<Selectors extends readonly any[]> = Selectors extends [f: infer F, ...other: infer R] ? StateFromSelector<F> extends StateFromSelectorList<R> ? StateFromSelector<F> : StateFromSelectorList<R> : {};
-type SelectorResultArrayWithArgs<Selectors extends ReadonlyArray<Selector<any>>, Args> = [...SelectorResultArray<Selectors>, Args];
-type SelectorArgs<Selectors extends ReadonlyArray<Selector<any>>, Args, Result> = [selectors: [...Selectors], combiner: (...args: SelectorResultArrayWithArgs<Selectors, Args>) => Result] | [...Selectors, (...args: SelectorResultArrayWithArgs<Selectors, Args>) => Result];
-type CreateSelectorFunction = <Selectors extends ReadonlyArray<Selector<any>>, Args, Result>(...items: SelectorArgs<Selectors, Args, Result>) => OutputSelector<StateFromSelectorList<Selectors>, Args, Result>;
 export declare const createSelector: CreateSelectorFunction;
+export declare const createSelectorMemoized: CreateSelectorFunction;
 /**
  * Used to create the root selector for a feature. It assumes that the state is already initialized
  * and strips from the types the possibility of `apiRef` being `null`.
  * Users are warned about this in our documentation https://mui.com/x/react-data-grid/state/#direct-selector-access
  */
-export declare const createRootSelector: <State, Args, Result>(fn: (state: State, args: Args) => Result) => OutputSelector<State, Args, Result>;
-export declare const createSelectorMemoized: CreateSelectorFunction;
-export {};
+export declare const createRootSelector: <State, Args, Result>(fn: (state: State, args: Args) => Result) => OutputSelector<State, Args, Result>;

package/esm/utils/createSelector.js

@@ -1,61 +1,12 @@
-import { lruMemoize, createSelectorCreator } from 'reselect';
-import { argsEqual } from "../hooks/utils/useGridSelector.js";
-import { weakMapMemoize as customWeakMapMemoize } from "./weakMapMemoize.js";
-const reselectCreateSelector = createSelectorCreator({
-  memoize: lruMemoize,
-  memoizeOptions: {
-    maxSize: 1,
-    equalityCheck: Object.is
-  },
-  argsMemoize: customWeakMapMemoize
-});
-const cache = new WeakMap();
-export const createSelector = (a, b, c, d, e, f, ...other) => {
-  if (other.length > 0) {
-    throw new Error('Unsupported number of selectors');
-  }
-  let selector;
-
-  // eslint-disable-next-line id-denylist
-  if (a && b && c && d && e && f) {
-    selector = (apiRef, args) => {
-      const va = a(apiRef, args);
-      const vb = b(apiRef, args);
-      const vc = c(apiRef, args);
-      const vd = d(apiRef, args);
-      const ve = e(apiRef, args);
-      return f(va, vb, vc, vd, ve, args);
-    };
-    // eslint-disable-next-line id-denylist
-  } else if (a && b && c && d && e) {
-    selector = (apiRef, args) => {
-      const va = a(apiRef, args);
-      const vb = b(apiRef, args);
-      const vc = c(apiRef, args);
-      const vd = d(apiRef, args);
-      return e(va, vb, vc, vd, args);
-    };
-  } else if (a && b && c && d) {
-    selector = (apiRef, args) => {
-      const va = a(apiRef, args);
-      const vb = b(apiRef, args);
-      const vc = c(apiRef, args);
-      return d(va, vb, vc, args);
-    };
-  } else if (a && b && c) {
-    selector = (apiRef, args) => {
-      const va = a(apiRef, args);
-      const vb = b(apiRef, args);
-      return c(va, vb, args);
-    };
-  } else if (a && b) {
-    selector = (apiRef, args) => {
-      const va = a(apiRef, args);
-      return b(va, args);
-    };
-  } else {
-    throw new Error('Missing arguments');
-  }
+import { createSelector as baseCreateSelector, createSelectorMemoized as baseCreateSelectorMemoized } from '@mui/x-internals/store';
+export const createSelector = (...args) => {
+  const baseSelector = baseCreateSelector(...args);
+  const selector = (apiRef, a1, a2, a3) => baseSelector(unwrapIfNeeded(apiRef), a1, a2, a3);
+  return selector;
+};
+export const createSelectorMemoized = (...args) => {
+  const baseSelector = baseCreateSelectorMemoized(...args);
+  const selector = (apiRef, a1, a2, a3) => baseSelector(unwrapIfNeeded(apiRef), a1, a2, a3);
   return selector;
 };
 
@@ -64,31 +15,10 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
  * and strips from the types the possibility of `apiRef` being `null`.
  * Users are warned about this in our documentation https://mui.com/x/react-data-grid/state/#direct-selector-access
  */
-export const createRootSelector = fn => (apiRef, args) => fn(apiRef.current.state, args);
-export const createSelectorMemoized = (...args) => {
-  const selector = (apiRef, selectorArgs) => {
-    const cacheKey = apiRef.current.instanceId;
-    const cacheArgsInit = cache.get(cacheKey);
-    const cacheArgs = cacheArgsInit ?? new Map();
-    const cacheFn = cacheArgs.get(args);
-    if (cacheArgs && cacheFn) {
-      if (!argsEqual(cacheFn.selectorArgs, selectorArgs)) {
-        const reselectArgs = selectorArgs !== undefined ? [...args.slice(0, args.length - 1), () => selectorArgs, args[args.length - 1]] : args;
-        const fn = reselectCreateSelector(...reselectArgs);
-        fn.selectorArgs = selectorArgs;
-        cacheArgs.set(args, fn);
-        return fn(apiRef, selectorArgs);
-      }
-      return cacheFn(apiRef, selectorArgs);
-    }
-    const reselectArgs = selectorArgs !== undefined ? [...args.slice(0, args.length - 1), () => selectorArgs, args[args.length - 1]] : args;
-    const fn = reselectCreateSelector(...reselectArgs);
-    fn.selectorArgs = selectorArgs;
-    if (!cacheArgsInit) {
-      cache.set(cacheKey, cacheArgs);
-    }
-    cacheArgs.set(args, fn);
-    return fn(apiRef, selectorArgs);
-  };
-  return selector;
-};
+export const createRootSelector = fn => (apiRef, args) => fn(unwrapIfNeeded(apiRef), args);
+function unwrapIfNeeded(refOrState) {
+  if ('current' in refOrState) {
+    return refOrState.current.state;
+  }
+  return refOrState;
+}

package/hooks/core/useGridApiInitialization.js

@@ -8,7 +8,7 @@ exports.unwrapPrivateAPI = unwrapPrivateAPI;
 exports.useGridApiInitialization = useGridApiInitialization;
 var React = _interopRequireWildcard(require("react"));
 var _EventManager = require("@mui/x-internals/EventManager");
-var _Store = require("../../utils/Store");
+var _store = require("@mui/x-internals/store");
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 var _signature = require("../../constants/signature");
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
@@ -27,7 +27,7 @@ function createPrivateAPI(publicApiRef) {
   const state = {};
   const privateApi = {
     state,
-    store: _Store.Store.create(state),
+    store: _store.Store.create(state),
     instanceId: {
       id: globalId
     }

package/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/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/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/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/hooks/features/columns/gridColumnsUtils.js

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

package/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/hooks/features/dataSource/useGridDataSourceBase.js

@@ -181,6 +181,10 @@ 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/hooks/features/dataSource/utils.js

@@ -32,7 +32,7 @@ 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((0, _extends2.default)({}, key, {
           start: i,

package/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;