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

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -1,11 +1,23 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterFormProps } from './GridFilterForm';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+export interface GetColumnForNewFilterArgs {
+    currentFilters: GridFilterItem[];
+    columns: GridStateColDef[];
+}
 export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'linkOperators' | 'columnsSort'> {
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
+    /**
+     * Function that returns the next filter item to be picked as default filter.
+     * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+     * @returns {GridColDef['field']} The field to be used for the next filter.
+     */
+    getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'];
     /**
      * Props passed to each filter form.
      */

package/components/panel/filterPanel/GridFilterPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -16,6 +16,13 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const getGridFilter = col => ({
+  columnField: col.field,
+  operatorValue: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
@@ -28,7 +35,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const {
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
-    filterFormProps
+    filterFormProps,
+    getColumnForNewFilter
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -38,41 +46,71 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const applyFilterLinkOperator = React.useCallback(operator => {
     apiRef.current.setFilterLinkOperator(operator);
   }, [apiRef]);
-  const getDefaultItem = React.useCallback(() => {
-    const firstColumnWithOperator = filterableColumns.find(colDef => {
-      var _colDef$filterOperato;
+  const getDefaultFilter = React.useCallback(() => {
+    let nextColumnWithOperator;
+
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      const nextColumnFieldName = getColumnForNewFilter({
+        currentFilters: (filterModel == null ? void 0 : filterModel.items) || [],
+        columns: filterableColumns
+      });
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextColumnFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => {
+        var _colDef$filterOperato;
+
+        return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+      });
+    }
+
+    if (!nextColumnWithOperator) {
+      return null;
+    }
 
-      return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel == null ? void 0 : filterModel.items, filterableColumns, getColumnForNewFilter]);
+  const getNewFilter = React.useCallback(() => {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+
+    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean); // If no items are there in filterModel, we have to pass defaultFilter
+
+    const nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
     });
+    const nextColumnWithOperator = filterableColumns.find(({
+      field
+    }) => field === nextColumnFieldName);
 
-    if (!firstColumnWithOperator) {
+    if (!nextColumnWithOperator) {
       return null;
     }
 
-    return {
-      columnField: firstColumnWithOperator.field,
-      operatorValue: firstColumnWithOperator.filterOperators[0].value,
-      id: Math.round(Math.random() * 1e5)
-    };
-  }, [filterableColumns]);
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
   const items = React.useMemo(() => {
     if (filterModel.items.length) {
       return filterModel.items;
     }
 
-    const defaultItem = getDefaultItem();
-    return defaultItem ? [defaultItem] : [];
-  }, [filterModel.items, getDefaultItem]);
+    const defaultFilter = getDefaultFilter();
+    return defaultFilter ? [defaultFilter] : [];
+  }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
 
   const addNewFilter = () => {
-    const defaultItem = getDefaultItem();
+    const newFilter = getNewFilter();
 
-    if (!defaultItem) {
+    if (!newFilter) {
       return;
     }
 
-    apiRef.current.upsertFilterItems([...items, defaultItem]);
+    apiRef.current.upsertFilterItems([...items, newFilter]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -149,6 +187,13 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     valueInputProps: PropTypes.any
   }),
 
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter.
+   */
+  getColumnForNewFilter: PropTypes.func,
+
   /**
    * Sets the available logic operators.
    * @default [GridLinkOperator.And, GridLinkOperator.Or]

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
-export declare const useGridRegisterPipeApplier: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: () => void) => void;
+export declare const useGridRegisterPipeApplier: <Api extends GridApiCommon<any, any>, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon<any, any>, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridStrategyProcessor } from './gridStrategyProcessingApi';
-export declare const useGridRegisterStrategyProcessor: <Api extends GridApiCommon, G extends keyof import("./gridStrategyProcessingApi").GridStrategyProcessingLookup>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;
+export declare const useGridRegisterStrategyProcessor: <Api extends GridApiCommon<any, any>, G extends keyof import("./gridStrategyProcessingApi").GridStrategyProcessingLookup>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;

package/hooks/core/useGridInitialization.d.ts

@@ -4,4 +4,4 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <Api extends GridApiCommon>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature' | 'logger' | 'logLevel' | 'error' | 'localeText'>) => React.MutableRefObject<Api>;
+export declare const useGridInitialization: <Api extends GridApiCommon<any, any>>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature' | 'logger' | 'logLevel' | 'error' | 'localeText'>) => React.MutableRefObject<Api>;

package/hooks/core/useGridStateInitialization.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { GridApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridStateInitialization: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'signature'>) => void;
+export declare const useGridStateInitialization: <Api extends GridApiCommon<any, any>>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'signature'>) => void;

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -22,7 +22,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         };
     };
     getInnerProps: () => {
-        ref: React.Ref<HTMLDivElement>;
+        ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
 };

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

@@ -0,0 +1 @@
+export * from './gridEditingSelectors';

package/hooks/features/editing/index.js

@@ -0,0 +1 @@
+export * from './gridEditingSelectors';

package/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js}

@@ -8,7 +8,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -121,7 +121,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = _extends({}, params, {
-          reason
+          reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', newParams, event);
@@ -132,14 +133,21 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -270,10 +278,17 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

package/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js}

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridCellEditing } from './useGridCellEditing.new';
+import { useGridCellEditing } from './useGridCellEditing';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
-import { useGridRowEditing } from './useGridRowEditing.new';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { useGridRowEditing } from './useGridRowEditing';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}

package/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js}

@@ -8,7 +8,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
@@ -181,6 +181,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
         const newParams = _extends({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
 
@@ -192,14 +193,21 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -339,7 +347,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -349,9 +358,14 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/hooks/features/index.d.ts

@@ -2,7 +2,7 @@ export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
 export * from './density';
-export * from './editRows';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';

package/hooks/features/index.js

@@ -3,7 +3,7 @@ export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
 export * from './density';
-export * from './editRows';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';

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,7 +9,7 @@ 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';

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.3
  *
  * 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

@@ -26,8 +26,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';

package/internals/index.js

@@ -22,8 +22,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';

package/legacy/DataGrid/DataGrid.js

@@ -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]].
@@ -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.

package/legacy/DataGrid/useDataGridComponent.js

@@ -11,8 +11,7 @@ import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/use
 import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
-import { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
+import { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
@@ -28,8 +27,6 @@ import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSp
 import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 import { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export var useDataGridComponent = function useDataGridComponent(props) {
-  var _props$experimentalFe, _props$experimentalFe2;
-
   var apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -46,7 +43,7 @@ export var useDataGridComponent = function useDataGridComponent(props) {
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -62,7 +59,6 @@ export var useDataGridComponent = function useDataGridComponent(props) {
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
-  var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);