@mui/x-data-grid 8.5.0 → 8.5.2

package/esm/components/export/ExportPrint.js

@@ -4,9 +4,9 @@ const _excluded = ["render", "options", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that triggers a print export.
@@ -33,7 +33,7 @@ const ExportPrint = forwardRef(function ExportPrint(props, ref) {
     apiRef.current.exportDataAsPrint(options);
     onClick?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref

package/esm/components/filterPanel/FilterPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface FilterPanelState {
   /**

package/esm/components/filterPanel/FilterPanelTrigger.js

@@ -5,12 +5,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import useForkRef from '@mui/utils/useForkRef';
 import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridFilterActiveItemsSelector, gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that opens and closes the filter panel.
@@ -63,7 +63,7 @@ const FilterPanelTrigger = forwardRef(function FilterPanelTrigger(props, ref) {
     }
     onPointerUp?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,

package/esm/components/quickFilter/QuickFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { QuickFilterState } from "./QuickFilterContext.js";
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from "../../models/index.js";
 export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**

package/esm/components/quickFilter/QuickFilter.js

@@ -7,8 +7,8 @@ import debounce from '@mui/utils/debounce';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { QuickFilterContext } from "./QuickFilterContext.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
@@ -129,7 +129,7 @@ function QuickFilter(props) {
       ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
     }
   }, []);
-  const element = useGridComponentRenderer('div', render, _extends({
+  const element = useComponentRenderer('div', render, _extends({
     className: resolvedClassName
   }, other, {
     ref

package/esm/components/quickFilter/QuickFilterClear.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterClearProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {

package/esm/components/quickFilter/QuickFilterClear.js

@@ -4,8 +4,8 @@ const _excluded = ["render", "className", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useQuickFilterContext } from "./QuickFilterContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -37,7 +37,7 @@ const QuickFilterClear = forwardRef(function QuickFilterClear(props, ref) {
     clearValue();
     onClick?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+  const element = useComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
     className: resolvedClassName,
     tabIndex: -1
   }, other, {

package/esm/components/quickFilter/QuickFilterControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterControlProps = Omit<GridSlotProps['baseTextField'], 'className'> & {

package/esm/components/quickFilter/QuickFilterControl.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useQuickFilterContext } from "./QuickFilterContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -64,7 +64,7 @@ const QuickFilterControl = forwardRef(function QuickFilterControl(props, ref) {
     onValueChange(event);
     onChange?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseTextField, render, _extends({}, rootProps.slotProps?.baseTextField, {
+  const element = useComponentRenderer(rootProps.slots.baseTextField, render, _extends({}, rootProps.slotProps?.baseTextField, {
     slotProps: _extends({
       htmlInput: _extends({
         role: 'searchbox',

package/esm/components/quickFilter/QuickFilterTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {

package/esm/components/quickFilter/QuickFilterTrigger.js

@@ -4,9 +4,9 @@ const _excluded = ["render", "className", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import useForkRef from '@mui/utils/useForkRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useQuickFilterContext } from "./QuickFilterContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -41,7 +41,7 @@ const QuickFilterTrigger = forwardRef(function QuickFilterTrigger(props, ref) {
     onExpandedChange(!state.expanded);
     onClick?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     className: resolvedClassName,
     'aria-controls': controlId,
     'aria-expanded': state.expanded

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.

package/esm/components/toolbarV8/Toolbar.js

@@ -7,9 +7,9 @@ import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { ToolbarContext } from "./ToolbarContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { sortByDocumentPosition } from "./utils.js";
@@ -179,7 +179,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
     onItemFocus,
     onItemDisabled
   }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
-  const element = useGridComponentRenderer(ToolbarRoot, render, _extends({
+  const element = useComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
     'aria-label': rootProps.label || undefined,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
   /**

package/esm/components/toolbarV8/ToolbarButton.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useToolbarContext } from "./ToolbarContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -70,7 +70,7 @@ const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
     }
     previousAriaDisabled.current = ariaDisabled;
   }, [ariaDisabled, id, onItemDisabled]);
-  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+  const element = useComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
     tabIndex: focusableItemId === id ? 0 : -1
   }, other, {
     disabled,

package/esm/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -56,12 +56,12 @@ export const useGridPipeProcessing = apiRef => {
     const oldProcessor = groupCache.processors.get(id);
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
-      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values());
+      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values()).filter(processorValue => processorValue !== null);
       runAppliers(groupCache);
     }
     return () => {
-      cache.current[group].processors.delete(id);
-      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values());
+      cache.current[group].processors.set(id, null);
+      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values()).filter(processorValue => processorValue !== null);
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {

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

@@ -29,7 +29,7 @@ export interface GetHeadersParams {
   maxLastColumn?: number;
 }
 type OwnerState = DataGridProcessedProps;
-export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+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>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {

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