@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

package/hooks/features/listView/useGridListView.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridListColDef } from '../../../models/colDef/gridColDef';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -7,4 +7,4 @@ export type GridListViewState = (GridListColDef & {
     computedWidth: number;
 }) | undefined;
 export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_listColumn'>>;
-export declare function useGridListView(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;
+export declare function useGridListView(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;

package/hooks/features/listView/useGridListView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { warnOnce } from '@mui/x-internals/warning';
 import { gridDimensionsSelector } from "../dimensions/index.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
@@ -37,7 +38,7 @@ export function useGridListView(apiRef, props) {
   /*
    * EFFECTS
    */
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     const listColumn = props.unstable_listColumn;
     if (listColumn) {
       apiRef.current.setState(state => {

package/hooks/features/overlays/useGridOverlays.d.ts

@@ -1,11 +1,14 @@
+import * as React from 'react';
 import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
-import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
-export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
 export declare const useGridOverlays: () => {
-    overlayType: GridOverlayType;
-    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+    getOverlay: () => React.JSX.Element | null;
+    overlaysProps: {
+        overlayType: GridOverlayType;
+        loadingOverlayVariant: GridLoadingOverlayVariant | null;
+    };
 };

package/hooks/features/overlays/useGridOverlays.js

@@ -1,8 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridApiContext } from "../../utils/useGridApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
+import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
+import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
@@ -12,7 +17,8 @@ export const useGridOverlays = () => {
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
@@ -26,10 +32,24 @@ export const useGridOverlays = () => {
   }
   if (loading) {
     overlayType = 'loadingOverlay';
-    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
   }
-  return {
+  const overlaysProps = {
     overlayType,
     loadingOverlayVariant
   };
+  const getOverlay = () => {
+    if (!overlayType) {
+      return null;
+    }
+    const Overlay = rootProps.slots?.[overlayType];
+    const overlayProps = rootProps.slotProps?.[overlayType];
+    return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, overlaysProps, {
+      children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
+    }));
+  };
+  return {
+    getOverlay,
+    overlaysProps
+  };
 };

package/hooks/features/pagination/gridPaginationInterfaces.d.ts

@@ -1,8 +1,11 @@
+import { GridFeatureMode } from '../../../models/gridFeatureMode';
 import { GridPaginationMeta, GridPaginationModel } from '../../../models/gridPaginationProps';
 export interface GridPaginationState {
     paginationModel: GridPaginationModel;
     rowCount: number;
     meta: GridPaginationMeta;
+    enabled: boolean;
+    paginationMode: GridFeatureMode;
 }
 export interface GridPaginationInitialState {
     paginationModel?: Partial<GridPaginationModel>;

package/hooks/features/pagination/gridPaginationSelector.d.ts

@@ -1,44 +1,50 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
+import { GridRowId } from '../../../models/gridRows';
 /**
  * @category Pagination
  * @ignore - do not document.
  */
 export declare const gridPaginationSelector: (state: GridStateCommunity) => import("./gridPaginationInterfaces").GridPaginationState;
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationEnabledClientSideSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, boolean>;
 /**
  * Get the pagination model
  * @category Pagination
  */
-export declare const gridPaginationModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel>;
+export declare const gridPaginationModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationModel>;
 /**
  * Get the row count
  * @category Pagination
  */
-export declare const gridPaginationRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPaginationRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, number>;
 /**
  * Get the pagination meta
  * @category Pagination
  */
-export declare const gridPaginationMetaSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationMeta>;
+export declare const gridPaginationMetaSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationMeta>;
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
  */
-export declare const gridPageSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPageSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
 /**
  * Get the maximum amount of rows to display on a single page if the pagination is enabled
  * @category Pagination
  */
-export declare const gridPageSizeSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPageSizeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
 /**
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-export declare const gridPageCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridPageCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export declare const gridPaginationRowRangeSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridPaginationRowRangeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
     firstRowIndex: number;
     lastRowIndex: number;
 } | null>;
@@ -46,9 +52,28 @@ export declare const gridPaginationRowRangeSelector: import("../../..").OutputSe
  * Get the id and the model of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, {
+    firstRowIndex: number;
+    lastRowIndex: number;
+} | null, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
 /**
  * Get the id of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export declare const gridPaginatedVisibleSortedGridRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridPaginatedVisibleSortedGridRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+    firstRowIndex: number;
+    lastRowIndex: number;
+} | null, GridRowId[]>;
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+export declare const gridVisibleRowsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
+    rows: import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[];
+    range: {
+        firstRowIndex: number;
+        lastRowIndex: number;
+    } | null;
+    rowIdToIndexMap: Map<GridRowId, number>;
+}>;

package/hooks/features/pagination/gridPaginationSelector.js

@@ -10,6 +10,12 @@ const ALL_RESULTS_PAGE_VALUE = -1;
  */
 export const gridPaginationSelector = state => state.pagination;
 
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export const gridPaginationEnabledClientSideSelector = createSelector(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
+
 /**
  * Get the pagination model
  * @category Pagination
@@ -50,7 +56,10 @@ export const gridPageCountSelector = createSelector(gridPaginationModelSelector,
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+  if (!clientSidePaginationEnabled) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
@@ -112,4 +121,33 @@ export const gridPaginatedVisibleSortedGridRowIdsSelector = createSelectorMemoiz
     return [];
   }
   return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+export const gridVisibleRowsSelector = createSelectorMemoized(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
+  if (clientPaginationEnabled) {
+    return {
+      rows: paginationRows,
+      range: paginationRowRange,
+      rowIdToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.id, index);
+        return lookup;
+      }, new Map())
+    };
+  }
+  return {
+    rows: expandedSortedRowEntries,
+    range: expandedSortedRowEntries.length === 0 ? null : {
+      firstRowIndex: 0,
+      lastRowIndex: expandedSortedRowEntries.length - 1
+    },
+    rowIdToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.id, index);
+      return lookup;
+    }, new Map())
+  };
 });

package/hooks/features/pagination/gridPaginationUtils.js

@@ -1,4 +1,4 @@
-import { GridSignature } from "../../utils/index.js";
+import { GridSignature } from "../../../constants/signature.js";
 const MAX_PAGE_SIZE = 100;
 export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 export const getPageCount = (rowCount, pageSize, page) => {

package/hooks/features/pagination/useGridPagination.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-export declare const paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature' | 'paginationMeta'>>;
+export declare const paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature' | 'paginationMeta' | 'pagination' | 'paginationMode'>>;
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPagination: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;
+export declare const useGridPagination: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/hooks/features/pagination/useGridPagination.js

@@ -6,14 +6,16 @@ import { useGridPaginationMeta } from "./useGridPaginationMeta.js";
 export const paginationStateInitializer = (state, props) => {
   const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
-  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
+  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount ?? (props.paginationMode === 'client' ? state.rows?.totalRowCount : undefined);
   const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return _extends({}, state, {
-    pagination: {
+    pagination: _extends({}, state.pagination, {
       paginationModel,
       rowCount,
-      meta
-    }
+      meta,
+      enabled: props.pagination === true,
+      paginationMode: props.paginationMode
+    })
   });
 };
 

package/hooks/features/pagination/useGridPaginationMeta.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridPaginationMeta: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationMeta" | "initialState" | "paginationMode" | "onPaginationMetaChange">) => void;
+export declare const useGridPaginationMeta: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationMeta" | "initialState" | "paginationMode" | "onPaginationMetaChange">) => void;

package/hooks/features/pagination/useGridPaginationModel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPaginationState } from './gridPaginationInterfaces';
@@ -8,4 +8,4 @@ export declare const getDerivedPaginationModel: (paginationState: GridPagination
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPaginationModel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "signature" | "rowHeight">) => void;
+export declare const useGridPaginationModel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight">) => void;

package/hooks/features/pagination/useGridPaginationModel.js

@@ -155,12 +155,34 @@ export const useGridPaginationModel = (apiRef, props) => {
   /**
    * EFFECTS
    */
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (!props.pagination) {
+      return;
+    }
     apiRef.current.setState(state => _extends({}, state, {
       pagination: _extends({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
       })
     }));
-  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  }, [apiRef, props.paginationModel, props.signature, props.pagination]);
+  React.useEffect(() => {
+    apiRef.current.setState(state => {
+      const isEnabled = props.pagination === true;
+      if (state.pagination.paginationMode === props.paginationMode || state.pagination.enabled === isEnabled) {
+        return state;
+      }
+      return _extends({}, state, {
+        pagination: _extends({}, state.pagination, {
+          paginationMode: props.paginationMode,
+          enabled: props.pagination === true
+        })
+      });
+    });
+  }, [apiRef, props.paginationMode, props.pagination]);
   React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
 };

package/hooks/features/pagination/useGridRowCount.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowCount: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowCount" | "initialState" | "paginationMode" | "onRowCountChange">) => void;
+export declare const useGridRowCount: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowCount" | "initialState" | "paginationMode" | "onRowCountChange">) => void;

package/hooks/features/preferencesPanel/gridPreferencePanelSelector.d.ts

@@ -1,2 +1,3 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridPreferencePanelStateSelector: (state: GridStateCommunity) => import("./gridPreferencePanelState").GridPreferencePanelState;
+export declare const gridPreferencePanelSelectorWithLabel: import("../../..").OutputSelector<GridStateCommunity, string, boolean>;

package/hooks/features/preferencesPanel/gridPreferencePanelSelector.js

@@ -1 +1,8 @@
-export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+export const gridPreferencePanelSelectorWithLabel = createSelector(gridPreferencePanelStateSelector, (panel, labelId) => {
+  if (panel.open && panel.labelId === labelId) {
+    return true;
+  }
+  return false;
+});

package/hooks/features/preferencesPanel/index.d.ts

@@ -1,3 +1,3 @@
-export * from './gridPreferencePanelSelector';
+export { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
 export * from './gridPreferencePanelState';
 export * from './gridPreferencePanelsValue';

package/hooks/features/preferencesPanel/index.js

@@ -1,3 +1,3 @@
-export * from "./gridPreferencePanelSelector.js";
+export { gridPreferencePanelStateSelector } from "./gridPreferencePanelSelector.js";
 export * from "./gridPreferencePanelState.js";
 export * from "./gridPreferencePanelsValue.js";

package/hooks/features/preferencesPanel/useGridPreferencesPanel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -6,4 +6,4 @@ export declare const preferencePanelStateInitializer: GridStateInitializer<Pick<
 /**
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
-export declare const useGridPreferencesPanel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState">) => void;
+export declare const useGridPreferencesPanel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState">) => void;

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,42 +15,29 @@ 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();
 
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState(state => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = gridPreferencePanelStateSelector(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
-    }
-    apiRef.current.setState(state => _extends({}, state, {
-      preferencePanel: {
-        open: false
-      }
-    }));
-    apiRef.current.forceUpdate();
+      return _extends({}, state, {
+        preferencePanel: {
+          open: false
+        }
+      });
+    });
   }, [apiRef, logger]);
-
-  // This is to prevent the preferences from closing when you open a select box or another panel,
-  // The issue is in MUI core V4 => Fixed in V5
-  const doNotHidePanel = React.useCallback(() => {
-    immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
-  }, []);
-
-  // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
-  // we can cancel the action if the trigger element still need the panel...
-  const hidePreferencesDelayed = React.useCallback(() => {
-    hideTimeout.current = setTimeout(hidePreferences, 100);
-  }, [hidePreferences]);
   const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
-    doNotHidePanel();
     apiRef.current.setState(state => _extends({}, state, {
       preferencePanel: _extends({}, state.preferencePanel, {
         open: true,
@@ -62,11 +49,10 @@ export const useGridPreferencesPanel = (apiRef, props) => {
     apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
-    apiRef.current.forceUpdate();
-  }, [logger, doNotHidePanel, apiRef]);
+  }, [logger, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences,
-    hidePreferences: hidePreferencesDelayed
+    hidePreferences
   }, 'public');
 
   /**
@@ -99,14 +85,4 @@ export const useGridPreferencesPanel = (apiRef, props) => {
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };

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

@@ -1,6 +1,6 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridRowId } from '../../../models/gridRows';
 export declare const gridRowSelectionStateSelector: (state: GridStateCommunity) => import("../../..").GridRowSelectionModel;
-export declare const selectedGridRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
-export declare const selectedGridRowsSelector: import("../../..").OutputSelector<GridStateCommunity, Map<GridRowId, import("../../..").GridValidRowModel>>;
-export declare const selectedIdsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;
+export declare const selectedGridRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowSelectionModel, number>;
+export declare const selectedGridRowsSelector: import("../../..").OutputSelector<GridStateCommunity, import("..").GridRowIdToModelLookup<import("../../..").GridValidRowModel>, Map<GridRowId, import("../../..").GridValidRowModel>>;
+export declare const selectedIdsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowSelectionModel, Record<GridRowId, GridRowId>>;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "filterMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;
+export declare const useGridRowSelection: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "filterMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { GridSignature } from "../../../constants/signature.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
@@ -12,7 +13,7 @@ import { gridExpandedSortedRowIdsSelector, gridFilteredRowsLookupSelector } from
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
@@ -64,7 +65,6 @@ export const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
-  const visibleRows = useGridVisibleRows(apiRef, props);
   const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
@@ -248,11 +248,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -263,7 +259,7 @@ export const useGridRowSelection = (apiRef, props) => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
       }
-      return filteredRowsLookup[id] !== true;
+      return !rowsLookup[id] || filteredRowsLookup[id] === false;
     };
     let hasChanged = false;
     currentSelection.forEach(id => {
@@ -317,11 +313,12 @@ export const useGridRowSelection = (apiRef, props) => {
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
-    const isSelected = apiRef.current.isRowSelected(id);
-    if (resetSelection) {
-      apiRef.current.selectRow(id, !isMultipleSelectionDisabled ? !isSelected : true, true);
+    const selectedRowsCount = apiRef.current.getSelectedRows().size;
+    if (canHaveMultipleSelection && selectedRowsCount > 1 && !hasCtrlKey) {
+      apiRef.current.selectRow(id, true, resetSelection);
     } else {
-      apiRef.current.selectRow(id, !isSelected, false);
+      const isSelected = apiRef.current.isRowSelected(id);
+      apiRef.current.selectRow(id, !isSelected, resetSelection);
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleRowClick = React.useCallback((params, event) => {
@@ -416,6 +413,7 @@ export const useGridRowSelection = (apiRef, props) => {
             end = previousRowIndex;
           }
         }
+        const visibleRows = getVisibleRows(apiRef);
         const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
         apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
         return;
@@ -430,7 +428,7 @@ export const useGridRowSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   useGridApiEventHandler(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   useGridApiEventHandler(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
@@ -480,9 +478,4 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 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: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;