@mui/x-data-grid 8.0.0-alpha.6 → 8.0.0-alpha.7

package/hooks/features/editing/useGridRowEditing.js

@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef();
+  const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,

package/hooks/features/export/useGridPrintExport.js

@@ -44,7 +44,7 @@ export const useGridPrintExport = (apiRef, props) => {
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
   const previousRows = React.useRef([]);
-  const previousVirtualizationState = React.useRef();
+  const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,8 +15,8 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
+  const hideTimeout = React.useRef(undefined);
+  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS

package/hooks/features/rowSelection/useGridRowSelectionPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridRowSelectionPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;
+export declare const useGridRowSelectionPreProcessors: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/hooks/features/rows/useGridRowsPreProcessors.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridRowsPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridRowsPreProcessors: (apiRef: React.RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -15,7 +15,7 @@ export declare const useGridVirtualScroller: () => {
         ref: (node: HTMLDivElement | null) => (() => void) | undefined;
     };
     getScrollerProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         onScroll: (event: React.UIEvent) => void;
         onWheel: (event: React.WheelEvent) => void;
         onTouchMove: (event: React.TouchEvent) => void;
@@ -31,11 +31,11 @@ export declare const useGridVirtualScroller: () => {
         role: string;
     };
     getScrollbarVerticalProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         role: string;
     };
     getScrollbarHorizontalProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         role: string;
     };
 };

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -86,6 +86,7 @@ export const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
+  const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
     if (!node) {
@@ -93,7 +94,10 @@ export const useGridVirtualScroller = () => {
     }
     const initialRect = node.getBoundingClientRect();
     let lastSize = roundDimensions(initialRect);
-    apiRef.current.publishEvent('resize', lastSize);
+    if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
+      previousSize.current = lastSize;
+      apiRef.current.publishEvent('resize', lastSize);
+    }
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }

package/hooks/utils/useGridApiEventHandler.js

@@ -24,7 +24,7 @@ export function createUseGridApiEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(null);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/hooks/utils/useGridApiMethod.d.ts

@@ -3,5 +3,5 @@ import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 type GetPublicApiType<PrivateApi> = PrivateApi extends {
     getPublicApi: () => infer PublicApi;
 } ? PublicApi : never;
-export declare function useGridApiMethod<PrivateApi extends GridPrivateApiCommon, PublicApi extends GetPublicApiType<PrivateApi>, PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>, V extends 'public' | 'private', T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>>(privateApiRef: React.MutableRefObject<PrivateApi>, apiMethods: T, visibility: V): void;
+export declare function useGridApiMethod<PrivateApi extends GridPrivateApiCommon, PublicApi extends GetPublicApiType<PrivateApi>, PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>, V extends 'public' | 'private', T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>>(privateApiRef: React.RefObject<PrivateApi>, apiMethods: T, visibility: V): void;
 export {};

package/hooks/utils/useGridApiRef.d.ts

@@ -4,4 +4,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.MutableRefObject<Api>;
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.RefObject<Api>;

package/hooks/utils/useGridInitializeState.d.ts

@@ -5,6 +5,6 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
-export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.MutableRefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
-export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.MutableRefObject<PrivateApi>, props: P) => void;
+export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.RefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.RefObject<PrivateApi>, props: P) => void;
 export {};

package/hooks/utils/useGridLogger.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Logger } from '../../models/logger';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare function useGridLogger<PrivateApi extends GridPrivateApiCommon>(privateApiRef: React.MutableRefObject<PrivateApi>, name: string): Logger;
+export declare function useGridLogger<PrivateApi extends GridPrivateApiCommon>(privateApiRef: React.RefObject<PrivateApi>, name: string): Logger;

package/hooks/utils/useGridVisibleRows.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridRowEntry } from '../../models';
-export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
+export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.RefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
     rows: GridRowEntry<import("../..").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
@@ -15,7 +15,7 @@ export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.M
  * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
-export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
+export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.RefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
     rows: GridRowEntry<import("../..").GridValidRowModel>[];
     range: {
         firstRowIndex: number;

package/index.js

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

package/internals/index.d.ts

@@ -12,7 +12,7 @@ export { getValueOptions } from '../components/panel/filterPanel/filterPanelUtil
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export type { GridPipeProcessor } from '../hooks/core/pipeProcessing';
 export { GridStrategyGroup, useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY, } from '../hooks/core/strategyProcessing';
-export type { GridStrategyProcessor } from '../hooks/core/strategyProcessing';
+export type { GridStrategyProcessor, GridStrategyProcessorName, } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';

package/models/api/gridCoreApi.d.ts

@@ -13,7 +13,7 @@ export interface GridCoreApi {
      * The React ref of the grid root container div element.
      * @ignore - do not document.
      */
-    rootElementRef: React.RefObject<HTMLDivElement>;
+    rootElementRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Registers a handler for an event.
      * @param {string} event The name of the event.
@@ -59,27 +59,27 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
     /**
      * The React ref of the grid main container div element.
      */
-    mainElementRef: React.MutableRefObject<HTMLDivElement | null>;
+    mainElementRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's virtual scroller container element.
      */
-    virtualScrollerRef: React.RefObject<HTMLDivElement>;
+    virtualScrollerRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's vertical virtual scrollbar container element.
      */
-    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
+    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's horizontal virtual scrollbar container element.
      */
-    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
+    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid column container virtualized div element.
      */
-    columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
+    columnHeadersContainerRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid header filter row element.
      */
-    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
+    headerFiltersElementRef?: React.RefObject<HTMLDivElement | null>;
     register: <V extends 'public' | 'private', T extends V extends 'public' ? Partial<GridPublicApi> : Partial<Omit<GridPrivateApi, keyof GridPublicApi>>>(visibility: V, methods: T) => void;
     /**
      * Returns the public API.

package/models/api/gridDensityApi.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridDensity } from '../gridDensity';
 export interface GridDensityOption {
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
     label: string;
     value: GridDensity;
 }

package/models/gridBaseSlots.d.ts

@@ -1,15 +1,38 @@
+type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
 export type BadgeProps = {
     badgeContent?: React.ReactNode;
     children: React.ReactNode;
     color?: 'primary' | 'default' | 'error';
+    invisible?: boolean;
     overlap?: 'circular';
     variant?: 'dot';
-    invisible?: boolean;
+    style?: React.CSSProperties;
+};
+export type ButtonProps = {
+    ref?: Ref;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    role?: string;
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: React.ReactNode;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    touchRippleRef?: any;
+};
+export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
+    label?: string;
+    color?: 'default' | 'inherit' | 'primary';
+    edge?: 'start' | 'end' | false;
 };
 export type DividerProps = {};
 export type MenuItemProps = {
     autoFocus?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** For items that aren't interactive themselves (but may contain an interactive widget) */
     inert?: boolean;
     disabled?: boolean;
@@ -18,6 +41,7 @@ export type MenuItemProps = {
     iconEnd?: React.ReactNode;
     selected?: boolean;
     value?: number | string | readonly string[];
+    style?: React.CSSProperties;
 };
 export type CircularProgressProps = {
     /**
@@ -34,3 +58,9 @@ export type SkeletonProps = {
     width?: number | string;
     height?: number | string;
 };
+export type TooltipProps = {
+    children: React.ReactElement<any, any>;
+    enterDelay?: number;
+    title: React.ReactNode;
+};
+export {};

package/models/gridSlotsComponentsProps.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
+import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 import type { CheckboxProps } from '@mui/material/Checkbox';
 import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress';
 import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
@@ -9,10 +10,9 @@ import type { TextFieldProps } from '@mui/material/TextField';
 import type { FormControlProps } from '@mui/material/FormControl';
 import type { SelectProps } from '@mui/material/Select';
 import type { SwitchProps } from '@mui/material/Switch';
-import type { ButtonProps } from '@mui/material/Button';
-import type { IconButtonProps } from '@mui/material/IconButton';
+import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
 import type { InputAdornmentProps } from '@mui/material/InputAdornment';
-import type { TooltipProps } from '@mui/material/Tooltip';
+import type { TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
 import type { PopperProps } from '@mui/material/Popper';
 import type { TablePaginationProps } from '@mui/material/TablePagination';
@@ -35,7 +35,7 @@ import type { GridColumnsManagementProps } from '../components/columnsManagement
 import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
-import type { BadgeProps, CircularProgressProps, DividerProps, LinearProgressProps, MenuItemProps, SkeletonProps } from './gridBaseSlots';
+import type { BadgeProps, ButtonProps, CircularProgressProps, DividerProps, IconButtonProps, LinearProgressProps, MenuItemProps, SkeletonProps, TooltipProps } from './gridBaseSlots';
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseBadgePropsOverrides {
@@ -144,9 +144,12 @@ interface BaseSlotProps {
 }
 interface MaterialSlotProps {
     baseBadge: MUIBadgeProps;
-    baseCircularProgress: MUICircularProgressProps;
+    baseButton: MUIButtonProps;
+    baseIconButton: MUIIconButtonProps;
     baseLinearProgress: MUILinearProgressProps;
+    baseCircularProgress: MUICircularProgressProps;
     baseMenuItem: MUIMenuItemProps;
+    baseTooltip: MUITooltipProps;
 }
 interface ElementSlotProps {
     cell: GridCellProps & CellPropsOverrides;
@@ -170,16 +173,17 @@ interface ElementSlotProps {
     skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides;
     toolbar: GridToolbarProps & ToolbarPropsOverrides;
     /**
-     * Props passed to the `.main` (role="grid") element
+     * Props passed to the `.main` (role="grid") element.
      */
     main: MainProps;
     /**
-     * Props passed to the `.root` element
+     * Props passed to the `.root` element.
      */
     root: RootProps;
 }
+type Select<A, B, K> = K extends keyof A ? A[K] : K extends keyof B ? B[K] : never;
 type Merge<A, B> = {
-    [K in keyof A | keyof B]: K extends keyof A & keyof B ? A[K] & B[K] : K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
+    [K in keyof A | keyof B]: K extends 'ref' ? Select<A, B, 'ref'> : K extends keyof A & keyof B ? A[K] & B[K] : K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
 };
 export type GridSlotProps = Merge<BaseSlotProps, MaterialSlotProps> & ElementSlotProps;
 /**

package/models/props/DataGridProps.d.ts

@@ -369,7 +369,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.MutableRefObject<GridApiCommunity>;
+    apiRef?: React.RefObject<GridApiCommunity>;
     /**
      * Signal to the underlying logic what version of the public component API
      * of the Data Grid is exposed [[GridSignature]].

package/modern/components/cell/GridActionsCellItem.js

@@ -6,6 +6,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+
+// FIXME(v8:romgrk): Make parametric
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridActionsCellItem = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();

package/modern/components/cell/GridEditDateCell.js

@@ -35,7 +35,7 @@ function GridEditDateCell(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isDateTime = colDef.type === 'dateTime';
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(null);
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
     if (valueProp == null) {

package/modern/components/cell/GridEditInputCell.js

@@ -47,7 +47,7 @@ const GridEditInputCell = forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(null);
   const [valueState, setValueState] = React.useState(value);
   const classes = useUtilityClasses(rootProps);
   const handleChange = React.useCallback(async event => {

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -30,8 +30,8 @@ function GridEditSingleSelectCell(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
-  const ref = React.useRef();
-  const inputRef = React.useRef();
+  const ref = React.useRef(null);
+  const inputRef = React.useRef(null);
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -57,7 +57,6 @@ function GridColumnHeaderFilterIconButton(props) {
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     id: labelId,
     onClick: toggleFilter,
-    color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
     tabIndex: -1,

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -87,7 +87,8 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_row'
     },
     onKeyDown: handleKeyDown,
     indeterminate: isIndeterminate,

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -42,13 +42,16 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       return selection;
     }
     return selection.filter(id => {
+      if (rootProps.keepNonExistentRowsSelected) {
+        return true;
+      }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
         return false;
       }
       return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
     });
-  }, [apiRef, rootProps.isRowSelectable, selection]);
+  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
@@ -103,7 +106,8 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_all_rows'
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -140,11 +140,11 @@ function GridColumnsManagement(props) {
           endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
             "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
             size: "small",
-            sx: [searchValue ? {
+            style: searchValue ? {
               visibility: 'visible'
             } : {
               visibility: 'hidden'
-            }],
+            },
             tabIndex: -1,
             onClick: handleSearchReset
           }, rootProps.slotProps?.baseIconButton, {

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -22,17 +22,17 @@ function GridFilterInputValue(props) {
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
-  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value, type));
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
   const onFilterChange = React.useCallback(event => {
-    const value = sanitizeFilterItemValue(event.target.value, type);
+    const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = _extends({}, item, {
-        value,
+        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
@@ -42,14 +42,14 @@ function GridFilterInputValue(props) {
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value == null) {
-      setFilterValueState(sanitizeFilterItemValue(item.value, type));
+      setFilterValueState(sanitizeFilterItemValue(item.value));
     }
-  }, [id, item, type]);
+  }, [id, item]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState === undefined ? '' : String(filterValueState),
+    value: filterValueState ?? '',
     onChange: onFilterChange,
     variant: variant,
     type: type || 'text',
@@ -71,13 +71,10 @@ function GridFilterInputValue(props) {
     inputRef: focusElementRef
   }, others, rootProps.slotProps?.baseTextField));
 }
-function sanitizeFilterItemValue(value, type) {
+function sanitizeFilterItemValue(value) {
   if (value == null || value === '') {
     return undefined;
   }
-  if (type === 'number') {
-    return Number(value);
-  }
   return String(value);
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -109,11 +109,11 @@ function GridToolbarQuickFilter(props) {
           "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
           size: "small",
           edge: "end",
-          sx: [searchValue ? {
+          style: searchValue ? {
             visibility: 'visible'
           } : {
             visibility: 'hidden'
-          }],
+          },
           onClick: handleSearchReset
         }, rootProps.slotProps?.baseIconButton, {
           children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeApplier(group, id.current, callback);

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);

package/modern/hooks/core/useGridApiInitialization.js

@@ -68,8 +68,8 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
-  const publicApiRef = React.useRef();
-  const privateApiRef = React.useRef();
+  const publicApiRef = React.useRef(null);
+  const privateApiRef = React.useRef(null);
   if (!privateApiRef.current) {
     privateApiRef.current = createPrivateAPI(publicApiRef);
   }

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -70,7 +70,7 @@ function preventClick(event) {
  * is disabled.
  */
 function useColumnVirtualizationDisabled(apiRef) {
-  const promise = React.useRef();
+  const promise = React.useRef(undefined);
   const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
   const value = useGridSelector(apiRef, selector);
   React.useEffect(() => {
@@ -184,10 +184,10 @@ export const useGridColumnResize = (apiRef, props) => {
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
-  const initialOffsetToSeparator = React.useRef();
-  const resizeDirection = React.useRef();
+  const initialOffsetToSeparator = React.useRef(null);
+  const resizeDirection = React.useRef(null);
   const stopResizeEventTimeout = useTimeout();
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
     const prevWidth = refs.columnHeaderElement.offsetWidth;

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef();
+  const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,

package/modern/hooks/features/export/useGridPrintExport.js

@@ -44,7 +44,7 @@ export const useGridPrintExport = (apiRef, props) => {
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
   const previousRows = React.useRef([]);
-  const previousVirtualizationState = React.useRef();
+  const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,8 +15,8 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
+  const hideTimeout = React.useRef(undefined);
+  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS