@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

package/hooks/features/{selection/useGridSelection.js → rowSelection/useGridRowSelection.js}

@@ -4,7 +4,7 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
+import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridRowSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
 import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
@@ -30,11 +30,11 @@ const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   return [selectionModelProp];
 };
 
-export const selectionStateInitializer = (state, props) => {
+export const rowSelectionStateInitializer = (state, props) => {
   var _getSelectionModelPro;
 
   return _extends({}, state, {
-    selection: (_getSelectionModelPro = getSelectionModelPropValue(props.selectionModel)) != null ? _getSelectionModelPro : []
+    rowSelection: (_getSelectionModelPro = getSelectionModelPropValue(props.rowSelectionModel)) != null ? _getSelectionModelPro : []
   });
 };
 /**
@@ -44,28 +44,28 @@ export const selectionStateInitializer = (state, props) => {
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
-export const useGridSelection = (apiRef, props) => {
+export const useGridRowSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
-  const propSelectionModel = React.useMemo(() => {
-    return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
-  }, [apiRef, props.selectionModel]);
+  const propRowSelectionModel = React.useMemo(() => {
+    return getSelectionModelPropValue(props.rowSelectionModel, gridRowSelectionStateSelector(apiRef.current.state));
+  }, [apiRef, props.rowSelectionModel]);
   const lastRowToggled = React.useRef(null);
   apiRef.current.unstable_registerControlState({
-    stateId: 'selection',
-    propModel: propSelectionModel,
-    propOnChange: props.onSelectionModelChange,
-    stateSelector: gridSelectionStateSelector,
-    changeEvent: 'selectionChange'
+    stateId: 'rowSelection',
+    propModel: propRowSelectionModel,
+    propOnChange: props.onRowSelectionModelChange,
+    stateSelector: gridRowSelectionStateSelector,
+    changeEvent: 'rowSelectionChange'
   });
   const {
     checkboxSelection,
-    disableMultipleSelection,
-    disableSelectionOnClick,
+    disableMultipleRowSelection,
+    disableRowSelectionOnClick,
     pagination,
     paginationMode,
     isRowSelectable: propIsRowSelectable
   } = props;
-  const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
+  const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
   const visibleRows = useGridVisibleRows(apiRef, props);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     var _lastRowToggled$curre;
@@ -100,18 +100,18 @@ export const useGridSelection = (apiRef, props) => {
    * API METHODS
    */
 
-  const setSelectionModel = React.useCallback(model => {
-    const currentModel = gridSelectionStateSelector(apiRef.current.state);
+  const setRowSelectionModel = React.useCallback(model => {
+    const currentModel = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (currentModel !== model) {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => _extends({}, state, {
-        selection: model
+        rowSelection: model
       }));
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
-  const isRowSelected = React.useCallback(id => gridSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
+  const isRowSelected = React.useCallback(id => gridRowSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
@@ -135,10 +135,10 @@ export const useGridSelection = (apiRef, props) => {
 
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
-      apiRef.current.setSelectionModel(isSelected ? [id] : []);
+      apiRef.current.setRowSelectionModel(isSelected ? [id] : []);
     } else {
       logger.debug(`Toggling selection for row ${id}`);
-      const selection = gridSelectionStateSelector(apiRef.current.state);
+      const selection = gridRowSelectionStateSelector(apiRef.current.state);
       const newSelection = selection.filter(el => el !== id);
 
       if (isSelected) {
@@ -148,7 +148,7 @@ export const useGridSelection = (apiRef, props) => {
       const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
       if (isSelectionValid) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
@@ -176,7 +176,7 @@ export const useGridSelection = (apiRef, props) => {
     const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
     if (isSelectionValid) {
-      apiRef.current.setSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(newSelection);
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
   const selectRowRange = React.useCallback(({
@@ -200,7 +200,7 @@ export const useGridSelection = (apiRef, props) => {
     selectRow,
     selectRows,
     selectRowRange,
-    setSelectionModel,
+    setRowSelectionModel,
     getSelectedRows,
     isRowSelected,
     isRowSelectable
@@ -215,7 +215,7 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
@@ -229,7 +229,7 @@ export const useGridSelection = (apiRef, props) => {
     });
 
     if (hasChanged) {
-      apiRef.current.setSelectionModel(Object.values(selectionLookup));
+      apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
     }
   }, [apiRef, props.keepNonExistentRowsSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
@@ -249,7 +249,7 @@ export const useGridSelection = (apiRef, props) => {
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleCellClick = React.useCallback((params, event) => {
-    if (disableSelectionOnClick) {
+    if (disableRowSelectionOnClick) {
       return;
     }
 
@@ -280,7 +280,7 @@ export const useGridSelection = (apiRef, props) => {
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
+  }, [disableRowSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
@@ -381,29 +381,29 @@ export const useGridSelection = (apiRef, props) => {
    */
 
   React.useEffect(() => {
-    if (propSelectionModel !== undefined) {
-      apiRef.current.setSelectionModel(propSelectionModel);
+    if (propRowSelectionModel !== undefined) {
+      apiRef.current.setRowSelectionModel(propRowSelectionModel);
     }
-  }, [apiRef, propSelectionModel]);
-  const isStateControlled = propSelectionModel != null;
+  }, [apiRef, propRowSelectionModel]);
+  const isStateControlled = propRowSelectionModel != null;
   React.useEffect(() => {
     if (isStateControlled) {
       return;
     } // props.isRowSelectable changed
 
 
-    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (isRowSelectable) {
       const newSelection = currentSelection.filter(id => isRowSelectable(id));
 
       if (newSelection.length < currentSelection.length) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, isRowSelectable, isStateControlled]);
   React.useEffect(() => {
-    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
@@ -427,7 +427,7 @@ export const useGridSelection = (apiRef, props) => {
 
         return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page
       });
-      apiRef.current.setSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
+      apiRef.current.setRowSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
     }
-  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleSelection, isRowSelectable, pagination, paginationMode]);
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleRowSelection, isRowSelectable, pagination, paginationMode]);
 };

package/hooks/features/{selection/useGridSelectionPreProcessors.d.ts → rowSelection/useGridRowSelectionPreProcessors.d.ts}

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

package/hooks/features/{selection/useGridSelectionPreProcessors.js → rowSelection/useGridRowSelectionPreProcessors.js}

@@ -18,7 +18,7 @@ const useUtilityClasses = ownerState => {
   }, [classes]);
 };
 
-export const useGridSelectionPreProcessors = (apiRef, props) => {
+export const useGridRowSelectionPreProcessors = (apiRef, props) => {
   const ownerState = {
     classes: props.classes
   };

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

@@ -10,6 +10,10 @@ export interface GridRowsInternalCache {
      * The value of the `loading` prop since the last time that the rows state was updated.
      */
     loadingPropBeforePartialUpdates: DataGridProcessedProps['loading'];
+    /**
+     * The value of the `rowCount` prop since the last time that the rows state was updated.
+     */
+    rowCountPropBeforePartialUpdates: DataGridProcessedProps['rowCount'];
     /**
      * Lookup containing the latest model at all time (even those not stored in the state yet).
      */

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

@@ -13,7 +13,7 @@ export declare const buildRootGroup: () => GridGroupNode;
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
 export declare const getRowIdFromRowModel: (rowModel: GridRowModel, getRowId?: GridRowIdGetter, detailErrorMessage?: string) => GridRowId;
-export declare const createRowsInternalCache: ({ rows, getRowId, loading, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading'>) => GridRowsInternalCache;
+export declare const createRowsInternalCache: ({ rows, getRowId, loading, rowCount, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading' | 'rowCount'>) => GridRowsInternalCache;
 export declare const getTopLevelRowCount: ({ tree, rowCountProp, }: {
     tree: GridRowTreeConfig;
     rowCountProp: DataGridProcessedProps['rowCount'];

package/hooks/features/rows/gridRowsUtils.js

@@ -34,7 +34,8 @@ export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) =>
 export const createRowsInternalCache = ({
   rows,
   getRowId,
-  loading
+  loading,
+  rowCount
 }) => {
   const updates = {
     type: 'full',
@@ -54,6 +55,7 @@ export const createRowsInternalCache = ({
   return {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     updates,
     dataRowIdToIdLookup,
     dataRowIdToModelLookup
@@ -264,7 +266,8 @@ export const updateCacheWithNewRows = ({
     dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
-    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates
+    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,
+    rowCountPropBeforePartialUpdates: previousCache.rowCountPropBeforePartialUpdates
   };
 };
 export function calculatePinnedRowsHeight(apiRef) {

package/hooks/features/rows/useGridRows.js

@@ -13,7 +13,8 @@ export const rowsStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.rows = createRowsInternalCache({
     rows: props.rows,
     getRowId: props.getRowId,
-    loading: props.loading
+    loading: props.loading,
+    rowCount: props.rowCount
   });
   return _extends({}, state, {
     rows: getRowsStateFromCache({
@@ -111,11 +112,12 @@ export const useGridRows = (apiRef, props) => {
       cache: createRowsInternalCache({
         rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       }),
       throttle: true
     });
-  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -349,7 +351,8 @@ export const useGridRows = (apiRef, props) => {
       cache = createRowsInternalCache({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       });
     }
 
@@ -357,7 +360,7 @@ export const useGridRows = (apiRef, props) => {
       cache,
       throttle: false
     });
-  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -420,7 +423,8 @@ export const useGridRows = (apiRef, props) => {
     }
 
     const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
-    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading;
+    const isNewRowCountAlreadyInState = apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates === props.rowCount; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
     if (areNewRowsAlreadyInState) {
       // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
@@ -434,6 +438,17 @@ export const useGridRows = (apiRef, props) => {
         apiRef.current.forceUpdate();
       }
 
+      if (!isNewRowCountAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            totalRowCount: Math.max(props.rowCount || 0, state.rows.totalRowCount),
+            totalTopLevelRowCount: Math.max(props.rowCount || 0, state.rows.totalTopLevelRowCount)
+          })
+        }));
+        apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
+        apiRef.current.forceUpdate();
+      }
+
       return;
     }
 
@@ -442,7 +457,8 @@ export const useGridRows = (apiRef, props) => {
       cache: createRowsInternalCache({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       }),
       throttle: false
     });

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

@@ -35,7 +35,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
     getRootProps: ({ style, ...other }?: {
         style?: {} | undefined;
     }) => {
-        ref: React.Ref<HTMLDivElement>;
+        ref: ((instance: HTMLDivElement | null) => void) | null;
         onScroll: (event: React.UIEvent) => void;
         onWheel: (event: React.WheelEvent) => void;
         onTouchMove: (event: React.TouchEvent) => void;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -9,11 +9,11 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
+import { gridEditRowsStateSelector } from '../editing/gridEditingSelectors';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
-import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
+import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils'; // Uses binary search to avoid looping through all possible positions

package/hooks/utils/useGridApi.d.ts

@@ -3,4 +3,4 @@ import { GridApiCommon } from '../../models/api/gridApiCommon';
 /**
  * @deprecated Use `apiRef.current` instead.
  */
-export declare const useGridApi: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>) => Api;
+export declare const useGridApi: <Api extends GridApiCommon<any, any>>(apiRef: React.MutableRefObject<Api>) => Api;

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -14,8 +14,8 @@ declare enum GridSignature {
 interface RegistryContainer {
     registry: CleanupTracking | null;
 }
-export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
+export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
 export declare const unstable_resetCleanupTracking: () => void;
-export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
+export declare const useGridApiEventHandler: <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
 export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
 export { GridSignature };

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<any, any> = GridApiCommunity>() => React.MutableRefObject<Api>;

package/hooks/utils/useGridInitializeState.d.ts

@@ -6,5 +6,5 @@ declare type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
 export declare type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, Api extends GridApiCommon = GridApiCommunity> = (state: DeepPartial<Api['state']>, props: P, apiRef: React.MutableRefObject<Api>) => DeepPartial<Api['state']>;
-export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps<any>>, Api extends GridApiCommon = GridApiCommunity>(initializer: GridStateInitializer<P, Api>, apiRef: React.MutableRefObject<Api>, props: P) => void;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps<any>>, Api extends GridApiCommon<any, any> = GridApiCommunity>(initializer: GridStateInitializer<P, Api>, apiRef: React.MutableRefObject<Api>, props: P) => void;
 export {};

package/hooks/utils/useGridNativeEventListener.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../models';
-export declare const useGridNativeEventListener: <Api extends GridApiCommon, K extends keyof HTMLElementEventMap>(apiRef: React.MutableRefObject<Api>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: ((event: HTMLElementEventMap[K]) => any) | undefined, options?: AddEventListenerOptions) => void;
+export declare const useGridNativeEventListener: <Api extends GridApiCommon<any, any>, K extends keyof HTMLElementEventMap>(apiRef: React.MutableRefObject<Api>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: ((event: HTMLElementEventMap[K]) => any) | undefined, options?: AddEventListenerOptions) => void;

package/hooks/utils/useGridSelector.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../models/api/gridApiCommon';
 import { OutputSelector } from '../../utils/createSelector';
-export declare const useGridSelector: <Api extends GridApiCommon, T>(apiRef: React.MutableRefObject<Api>, selector: OutputSelector<Api["state"], T> | ((state: Api["state"]) => T)) => T;
+export declare const useGridSelector: <Api extends GridApiCommon<any, any>, T>(apiRef: React.MutableRefObject<Api>, selector: OutputSelector<Api["state"], T> | ((state: Api["state"]) => T)) => T;

package/hooks/utils/useGridState.d.ts

@@ -4,4 +4,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity';
 /**
  * @deprecated Use `apiRef.current.state`, `apiRef.current.setState` and `apiRef.current.forceUpdate` instead.
  */
-export declare const useGridState: <Api extends GridApiCommon = GridApiCommunity>(apiRef: React.MutableRefObject<Api>) => readonly [any, any, any];
+export declare const useGridState: <Api extends GridApiCommon<any, any> = GridApiCommunity>(apiRef: React.MutableRefObject<Api>) => readonly [any, <S extends any, K extends "filter">(state: S | ((previousState: S) => S), reason?: import("../..").GridControlledStateReasonLookup[K] | undefined) => boolean, () => void];

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<any, any>>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
     rows: GridRowEntry<import("../../models").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<any, any>>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
     rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     range: {
         firstRowIndex: number;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.2
+/** @license MUI v6.0.0-alpha.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/index.d.ts

@@ -14,7 +14,6 @@ export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/feature
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columnGrouping/useGridColumnGrouping';
-export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
@@ -26,8 +25,7 @@ export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/use
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer, } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer, } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new, } from '../hooks/features/editRows/useGridEditing.new';
-export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old, } from '../hooks/features/editRows/useGridEditing.old';
+export { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRowsValue, GridRowsPartialUpdates, GridRowsPartialUpdateAction, GridTreeDepths, GridRowTreeUpdatedGroupsManager, GridRowTreeUpdateGroupAction, GridPinnedRowsState, } from '../hooks/features/rows/gridRowsInterfaces';
@@ -37,8 +35,8 @@ export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, } from '../hooks/features/rows/gridRowsSelector';
 export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';
-export { useGridSelection, selectionStateInitializer, } from '../hooks/features/selection/useGridSelection';
-export { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
+export { useGridRowSelection, rowSelectionStateInitializer, } from '../hooks/features/rowSelection/useGridRowSelection';
+export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 export type { GridSortingModelApplier } from '../hooks/features/sorting/gridSortingState';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';

package/internals/index.js

@@ -12,7 +12,6 @@ export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
-export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
@@ -22,8 +21,7 @@ export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/use
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
-export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
+export { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
@@ -32,8 +30,8 @@ export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '../hooks/features/rows/gridRowsSelector';
 export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';
-export { useGridSelection, selectionStateInitializer } from '../hooks/features/selection/useGridSelection';
-export { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
+export { useGridRowSelection, rowSelectionStateInitializer } from '../hooks/features/rowSelection/useGridRowSelection';
+export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';

package/legacy/DataGrid/DataGrid.js

@@ -168,7 +168,7 @@ DataGridRaw.propTypes = {
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
    */
-  disableSelectionOnClick: PropTypes.bool,
+  disableRowSelectionOnClick: PropTypes.bool,
 
   /**
    * If `true`, the virtualization is disabled.
@@ -198,8 +198,6 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
-    newEditingApi: PropTypes.bool,
-    preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -376,14 +374,6 @@ DataGridRaw.propTypes = {
    */
   onCellDoubleClick: PropTypes.func,
 
-  /**
-   * Callback fired when the cell changes are committed.
-   * @param {GridCellEditCommitParams} params With all properties from [[GridCellEditCommitParams]].
-   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onCellEditCommit: PropTypes.func,
-
   /**
    * Callback fired when the cell turns to edit mode.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -484,15 +474,6 @@ DataGridRaw.propTypes = {
    */
   onColumnVisibilityModelChange: PropTypes.func,
 
-  /**
-   * Callback fired when the edit cell value changes.
-   * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
-   * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
-   */
-  onEditCellPropsChange: PropTypes.func,
-
   /**
    * Callback fired when the `editRowsModel` changes.
    * @param {GridEditRowsModel} editRowsModel With all properties from [[GridEditRowsModel]].
@@ -622,10 +603,10 @@ DataGridRaw.propTypes = {
 
   /**
    * Callback fired when the selection state of one or multiple rows changes.
-   * @param {GridSelectionModel} selectionModel With all the row ids [[GridSelectionModel]].
+   * @param {GridRowSelectionModel} rowSelectionModel With all the row ids [[GridSelectionModel]].
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
-  onSelectionModelChange: PropTypes.func,
+  onRowSelectionModelChange: PropTypes.func,
 
   /**
    * Callback fired when the sort model changes before a column is sorted.
@@ -679,7 +660,6 @@ DataGridRaw.propTypes = {
 
   /**
    * Callback called before updating a row with new values in the row and cell editing.
-   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
@@ -715,6 +695,17 @@ DataGridRaw.propTypes = {
    */
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
+  /**
+   * Sets the row selection model of the grid.
+   */
+  rowSelectionModel: chainPropTypes(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), function (props) {
+    if (!props.checkboxSelection && Array.isArray(props.rowSelectionModel) && props.rowSelectionModel.length > 1) {
+      return new Error(["MUI: `<DataGrid rowSelectionModel={".concat(JSON.stringify(props.rowSelectionModel), "} />` is not a valid prop."), 'rowSelectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
+    }
+
+    return null;
+  }),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"
@@ -738,17 +729,6 @@ DataGridRaw.propTypes = {
    */
   scrollbarSize: PropTypes.number,
 
-  /**
-   * Set the selection model of the grid.
-   */
-  selectionModel: chainPropTypes(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), function (props) {
-    if (!props.checkboxSelection && Array.isArray(props.selectionModel) && props.selectionModel.length > 1) {
-      return new Error(["MUI: `<DataGrid selectionModel={".concat(JSON.stringify(props.selectionModel), "} />` is not a valid prop."), 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
-    }
-
-    return null;
-  }),
-
   /**
    * If `true`, the right border of the cells are displayed.
    * @default false