fix rebase issues

packages/grid/_modules_/grid/GridComponent.tsx

@@ -22,7 +22,7 @@ import { useGridState } from './hooks/features/core/useGridState';
 import { useGridPagination } from './hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel } from './hooks/features/preferencesPanel/useGridPreferencesPanel';
 import { useGridRows } from './hooks/features/rows/useGridRows';
-import { useEditRows } from './hooks/features/rows/useEditRows';
+import { useGridEditRows } from './hooks/features/rows/useGridEditRows';
 import { useGridSorting } from './hooks/features/sorting/useGridSorting';
 import { useGridApiRef } from './hooks/features/useGridApiRef';
 import { useGridColumnReorder } from './hooks/features/columnReorder';
@@ -76,6 +76,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
 
     useGridColumns(props.columns, apiRef);
     useGridRows(apiRef, props.rows, props.getRowId);
+    useGridEditRows(apiRef);
     useGridKeyboard(rootContainerRef, apiRef);
     useGridSelection(apiRef);
     useGridSorting(apiRef, props.rows);

packages/grid/_modules_/grid/components/GridRowCells.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { editRowsStateSelector } from '../hooks/features/rows/useEditRows';
+import { gridEditRowsStateSelector } from '../hooks/features/rows/useGridEditRows';
 import {
   GridCellClassParams,
   GridColumns,
@@ -52,7 +52,7 @@ export const GridRowCells: React.FC<RowCellsProps> = React.memo((props) => {
   } = props;
   const api = React.useContext(GridApiContext);
   const rowHeight = useGridSelector(api, gridDensityRowHeightSelector);
-  const editRowsState = useGridSelector(api, editRowsStateSelector);
+  const editRowsState = useGridSelector(api, gridEditRowsStateSelector);
 
   const cellsProps = columns.slice(firstColIdx, lastColIdx + 1).map((column, colIdx) => {
     const isLastColumn = firstColIdx + colIdx === columns.length - 1;

packages/grid/_modules_/grid/components/editCell/StringEditCell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
-import { CellParams } from '../../models/params/cellParams';
+import { GridCellParams } from '../../models/params/gridCellParams';
 import { isDate } from '../../utils/utils';
 
 // export interface StringEditCellProps extends CellParams {
@@ -19,7 +19,7 @@ function mapColDefTypeToInputType(type: string) {
       return 'text';
   }
 }
-export function StringEditCell(props: CellParams & TextFieldProps) {
+export function StringEditCell(props: GridCellParams & TextFieldProps) {
   const {
     value,
     api,

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -18,8 +18,10 @@ export const GRID_COMPONENT_ERROR = 'componentError';
 export const GRID_UNMOUNT = 'unmount';
 export const GRID_ELEMENT_FOCUS_OUT = 'gridFocusOut';
 export const GRID_CELL_CLICK = 'cellClick';
+export const GRID_DOUBLE_CELL_CLICK = 'doubleCellClick';
 export const GRID_CELL_HOVER = 'cellHover';
 export const GRID_ROW_CLICK = 'rowClick';
+export const GRID_DOUBLE_ROW_CLICK = 'doubleRowClick';
 export const GRID_ROW_HOVER = 'rowHover';
 export const GRID_ROW_SELECTED = 'rowSelected';
 export const GRID_SELECTION_CHANGED = 'selectionChange';

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -23,6 +23,7 @@ import {
 } from '../pagination/gridPaginationReducer';
 import { GridPreferencePanelState } from '../preferencesPanel/gridPreferencePanelState';
 import { getInitialGridRowState, InternalGridRowsState } from '../rows/gridRowsState';
+import { GridEditRowsModel } from '../rows/useGridEditRows';
 import { GridSelectionState } from '../selection/gridSelectionState';
 import { getInitialGridSortingState, GridSortingState } from '../sorting/gridSortingState';
 import {
@@ -32,7 +33,7 @@ import {
 
 export interface GridState {
   rows: InternalGridRowsState;
-  editRows: EditRowsModel;
+  editRows: GridEditRowsModel;
   pagination: PaginationState;
   options: GridOptions;
   isScrolling: boolean;

packages/grid/_modules_/grid/hooks/features/rows/useEditRows.ts → packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts

@@ -1,49 +1,50 @@
 import * as React from 'react';
 import {
-  CELL_MODE_CHANGE,
-  CELL_VALUE_CHANGE,
-  CELL_VALUE_CHANGE_COMMITTED,
-  EDIT_ROW_MODEL_CHANGE,
+  GRID_CELL_MODE_CHANGE,
+  GRID_CELL_VALUE_CHANGE,
+  GRID_CELL_VALUE_CHANGE_COMMITTED,
+  GRID_EDIT_ROW_MODEL_CHANGE,
 } from '../../../constants/eventsConstants';
-import { ApiRef } from '../../../models/api/apiRef';
-import { EditRowApi } from '../../../models/api/rowApi';
-import { CellMode, CellValue } from '../../../models/cell';
-import { CellParams } from '../../../models/params/cellParams';
-import { RowModelUpdate } from '../../../models/rows';
-import { useApiEventHandler } from '../../root/useApiEventHandler';
-import { useApiMethod } from '../../root/useApiMethod';
+import { GridApiRef } from '../../../models/api/gridApiRef';
+import { GridEditRowApi } from '../../../models/api/gridRowApi';
+import { GridCellMode, GridCellValue } from '../../../models/gridCell';
+import { GridRowModelUpdate } from '../../../models/gridRows';
+import { GridCellParams } from '../../../models/params/gridCellParams';
+import { useGridApiEventHandler } from '../../root/useGridApiEventHandler';
+import { useGridApiMethod } from '../../root/useGridApiMethod';
+
 import { optionsSelector } from '../../utils/optionsSelector';
 import { GridState } from '../core/gridState';
 import { useGridSelector } from '../core/useGridSelector';
 import { useGridState } from '../core/useGridState';
 
-export interface EditCellProps {
-  value: CellValue;
+export interface GridEditCellProps {
+  value: GridCellValue;
   [prop: string]: any;
 }
 
-export type EditRow = { [field: string]: true | EditCellProps };
-export type EditRowsModel = { [rowId: string]: EditRow };
+export type GridEditRow = { [field: string]: true | GridEditCellProps };
+export type GridEditRowsModel = { [rowId: string]: GridEditRow };
 
-export const editRowsStateSelector = (state: GridState) => state.editRows;
+export const gridEditRowsStateSelector = (state: GridState) => state.editRows;
 
-export function useEditRows(apiRef: ApiRef) {
+export function useGridEditRows(apiRef: GridApiRef) {
   const [, setGridState, forceUpdate] = useGridState(apiRef);
   const options = useGridSelector(apiRef, optionsSelector);
 
   const setCellEditMode = React.useCallback(
     (id, field) => {
       setGridState((state) => {
-        const currentCellEditState: EditRowsModel = { ...state.editRows };
+        const currentCellEditState: GridEditRowsModel = { ...state.editRows };
         currentCellEditState[id] = currentCellEditState[id] || {};
         currentCellEditState[id][field] = true;
 
         const newEditRowsState = { ...state.editRows, ...currentCellEditState };
 
-        apiRef.current.publishEvent(EDIT_ROW_MODEL_CHANGE, newEditRowsState);
+        apiRef.current.publishEvent(GRID_EDIT_ROW_MODEL_CHANGE, newEditRowsState);
         return { ...state, editRows: newEditRowsState };
       });
-      apiRef.current.publishEvent(CELL_MODE_CHANGE, {
+      apiRef.current.publishEvent(GRID_CELL_MODE_CHANGE, {
         id,
         field,
         mode: 'edit',
@@ -57,7 +58,7 @@ export function useEditRows(apiRef: ApiRef) {
   const setCellViewMode = React.useCallback(
     (id, field) => {
       setGridState((state) => {
-        const newEditRowsState: EditRowsModel = { ...state.editRows };
+        const newEditRowsState: GridEditRowsModel = { ...state.editRows };
 
         if (!newEditRowsState[id]) {
           return state;
@@ -69,11 +70,11 @@ export function useEditRows(apiRef: ApiRef) {
             delete newEditRowsState[id];
           }
         }
-        apiRef.current.publishEvent(EDIT_ROW_MODEL_CHANGE, newEditRowsState);
+        apiRef.current.publishEvent(GRID_EDIT_ROW_MODEL_CHANGE, newEditRowsState);
 
         return { ...state, editRows: newEditRowsState };
       });
-      apiRef.current.publishEvent(CELL_MODE_CHANGE, {
+      apiRef.current.publishEvent(GRID_CELL_MODE_CHANGE, {
         id,
         field,
         mode: 'view',
@@ -85,7 +86,7 @@ export function useEditRows(apiRef: ApiRef) {
   );
 
   const setCellMode = React.useCallback(
-    (id, field, mode: CellMode) => {
+    (id, field, mode: GridCellMode) => {
       if (mode === 'edit') {
         setCellEditMode(id, field);
       } else {
@@ -96,16 +97,19 @@ export function useEditRows(apiRef: ApiRef) {
   );
 
   const isCellEditable = React.useCallback(
-    (params: CellParams) => {
+    (params: GridCellParams) => {
       return params.colDef.editable && (!options.isCellEditable || options.isCellEditable(params));
     },
     [options.isCellEditable],
   );
 
   const commitCellValueChanges = React.useCallback(
-    (update: RowModelUpdate) => {
-      if (apiRef.current.hasListener(CELL_VALUE_CHANGE_COMMITTED)) {
-        apiRef.current.publishEvent(CELL_VALUE_CHANGE_COMMITTED, { update, api: apiRef.current });
+    (update: GridRowModelUpdate) => {
+      if (apiRef.current.hasListener(GRID_CELL_VALUE_CHANGE_COMMITTED)) {
+        apiRef.current.publishEvent(GRID_CELL_VALUE_CHANGE_COMMITTED, {
+          update,
+          api: apiRef.current,
+        });
         return;
       }
       //TODO don't update when it's in server mode
@@ -119,14 +123,14 @@ export function useEditRows(apiRef: ApiRef) {
   );
 
   const setEditCellValue = React.useCallback(
-    (update: RowModelUpdate) => {
-      apiRef.current.publishEvent(CELL_VALUE_CHANGE, { update, api: apiRef.current });
+    (update: GridRowModelUpdate) => {
+      apiRef.current.publishEvent(GRID_CELL_VALUE_CHANGE, { update, api: apiRef.current });
     },
     [apiRef],
   );
 
   const setEditRowsModel = React.useCallback(
-    (editRows: EditRowsModel) => {
+    (editRows: GridEditRowsModel) => {
       setGridState((state) => {
         const newState = { ...state, editRows };
         return newState;
@@ -137,12 +141,16 @@ export function useEditRows(apiRef: ApiRef) {
   );
 
   //TODO add those options.handlers on apiRef
-  useApiEventHandler(apiRef, CELL_VALUE_CHANGE, options.onEditCellValueChange);
-  useApiEventHandler(apiRef, CELL_VALUE_CHANGE_COMMITTED, options.onEditCellValueChangeCommitted);
-  useApiEventHandler(apiRef, CELL_MODE_CHANGE, options.onCellModeChange);
-  useApiEventHandler(apiRef, EDIT_ROW_MODEL_CHANGE, options.onEditRowModelChange);
+  useGridApiEventHandler(apiRef, GRID_CELL_VALUE_CHANGE, options.onEditCellValueChange);
+  useGridApiEventHandler(
+    apiRef,
+    GRID_CELL_VALUE_CHANGE_COMMITTED,
+    options.onEditCellValueChangeCommitted,
+  );
+  useGridApiEventHandler(apiRef, GRID_CELL_MODE_CHANGE, options.onCellModeChange);
+  useGridApiEventHandler(apiRef, GRID_EDIT_ROW_MODEL_CHANGE, options.onEditRowModelChange);
 
-  useApiMethod<EditRowApi>(
+  useGridApiMethod<GridEditRowApi>(
     apiRef,
     { setCellMode, isCellEditable, commitCellValueChanges, setEditCellValue, setEditRowsModel },
     'EditRowApi',

packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts

@@ -9,7 +9,7 @@ import { GridRowApi } from '../../../models/api/gridRowApi';
 import {
   checkGridRowHasId,
   GridRowModel,
-  RowModelUpdate,
+  GridRowModelUpdate,
   GridRowId,
   GridRowsProp,
   GridRowIdGetter,
@@ -133,7 +133,7 @@ export const useGridRows = (
   );
 
   const updateRows = React.useCallback(
-    (updates: RowModelUpdate[]) => {
+    (updates: GridRowModelUpdate[]) => {
       // we removes duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
       const uniqUpdates = updates.reduce((uniq, update) => {
         const udpateWithId = addGridRowId(update, getRowIdProp);

packages/grid/_modules_/grid/hooks/root/useEvents.ts

@@ -25,9 +25,9 @@ import {
   GRID_ELEMENT_FOCUS_OUT,
   GRID_COMPONENT_ERROR,
   GRID_STATE_CHANGE,
-  DOUBLE_CELL_CLICK,
-  DOUBLE_ROW_CLICK,
-  DOUBLE_CLICK,
+  GRID_DOUBLE_CELL_CLICK,
+  GRID_DOUBLE_ROW_CLICK,
+  GRID_DOUBLE_CLICK,
 } from '../../constants/eventsConstants';
 import { GRID_CELL_CSS_CLASS, GRID_ROW_CSS_CLASS } from '../../constants/cssClassesConstants';
 import { findParentElementFromClassName, getIdFromRowElem, isGridCell } from '../../utils/domUtils';
@@ -125,10 +125,10 @@ export function useEvents(gridRootRef: React.RefObject<HTMLDivElement>, apiRef:
       }
 
       if (eventParams.cell) {
-        apiRef.current.publishEvent(DOUBLE_CELL_CLICK, eventParams.cell);
+        apiRef.current.publishEvent(GRID_DOUBLE_CELL_CLICK, eventParams.cell);
       }
       if (eventParams.row) {
-        apiRef.current.publishEvent(DOUBLE_ROW_CLICK, eventParams.row);
+        apiRef.current.publishEvent(GRID_DOUBLE_ROW_CLICK, eventParams.row);
       }
     },
     [apiRef, getEventParams],
@@ -212,7 +212,7 @@ export function useEvents(gridRootRef: React.RefObject<HTMLDivElement>, apiRef:
       const gridRootElem = gridRootRef.current;
 
       gridRootElem.addEventListener(GRID_CLICK, onClickHandler, { capture: true });
-      gridRootElem.addEventListener(DOUBLE_CLICK, onDoubleClickHandler, { capture: true });
+      gridRootElem.addEventListener(GRID_DOUBLE_CLICK, onDoubleClickHandler, { capture: true });
       gridRootElem.addEventListener(GRID_MOUSE_HOVER, onHoverHandler, { capture: true });
       gridRootElem.addEventListener(GRID_FOCUS_OUT, onFocusOutHandler);
 

packages/grid/_modules_/grid/models/api/gridApi.ts

@@ -3,7 +3,7 @@ import { ColumnResizeApi } from './columnResizeApi';
 import { ComponentsApi } from './gridComponentsApi';
 import { FilterApi } from './filterApi';
 import { PreferencesPanelApi } from './preferencesPanelApi';
-import { GridRowApi, EditRowApi } from './gridRowApi';
+import { GridRowApi, GridEditRowApi } from './gridRowApi';
 import { GridColumnApi } from './gridColumnApi';
 import { ColumnReorderApi } from './columnReorderApi';
 import { GridSelectionApi } from './gridSelectionApi';
@@ -26,7 +26,7 @@ export type GridApi = GridCoreApi &
   GridDensityApi &
   GridEventsApi &
   GridRowApi &
-  EditRowApi &
+  GridEditRowApi &
   GridColumnApi &
   ColumnReorderApi &
   GridSelectionApi &

packages/grid/_modules_/grid/models/api/gridRowApi.ts

@@ -1,8 +1,7 @@
-import { GridRowModel, GridRowId, RowModelUpdate } from '../gridRows';
-import { EditRowsModel } from '../../hooks/features/rows/useEditRows';
-import { CellMode } from '../cell';
-import { CellParams } from '../params/cellParams';
-import { RowModel, RowId, RowModelUpdate } from '../rows';
+import { GridCellMode } from '../gridCell';
+import { GridRowModel, GridRowId, GridRowModelUpdate } from '../gridRows';
+import { GridEditRowsModel } from '../../hooks/features/rows/useGridEditRows';
+import { GridCellParams } from '../params/gridCellParams';
 
 /**
  * The Row API interface that is available in the grid [[apiRef]].
@@ -30,7 +29,7 @@ export interface GridRowApi {
    * Update any properties of the current set of GridRowData[].
    * @param updates
    */
-  updateRows: (updates: RowModelUpdate[]) => void;
+  updateRows: (updates: GridRowModelUpdate[]) => void;
   /**
    * Get the GridRowId of a row at a specific position.
    * @param index
@@ -48,10 +47,10 @@ export interface GridRowApi {
   getRowFromId: (id: GridRowId) => GridRowModel;
 }
 
-export interface EditRowApi {
-  setEditRowsModel: (model: EditRowsModel) => void;
-  setCellMode: (rowId: RowId, field: string, mode: CellMode) => void;
-  isCellEditable: (params: CellParams) => boolean;
-  setEditCellValue: (update: RowModelUpdate) => void;
-  commitCellValueChanges: (update: RowModelUpdate) => void;
+export interface GridEditRowApi {
+  setEditRowsModel: (model: GridEditRowsModel) => void;
+  setCellMode: (rowId: GridRowId, field: string, mode: GridCellMode) => void;
+  isCellEditable: (params: GridCellParams) => boolean;
+  setEditCellValue: (update: GridRowModelUpdate) => void;
+  commitCellValueChanges: (update: GridRowModelUpdate) => void;
 }

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

@@ -97,7 +97,7 @@ export interface GridColDef {
    * Allows to override the component rendered in edit cell mode for this column.
    * @param params
    */
-  renderEditCell?: (params: CellParams) => React.ReactElement;
+  renderEditCell?: (params: GridCellParams) => React.ReactElement;
   /**
    * Class name that will be added in the column header cell.
    */

packages/grid/_modules_/grid/models/colDef/gridDateColDef.ts

@@ -1,3 +1,4 @@
+import { renderEditStringCell } from '../../components/editCell/StringEditCell';
 import { isDate } from '../../utils/utils';
 import { gridDateComparer } from '../../utils/sortingUtils';
 import { GridCellValue } from '../gridCell';
@@ -25,6 +26,7 @@ export const GRID_DATE_COL_DEF: GridColTypeDef = {
   sortComparator: gridDateComparer,
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
+  renderEditCell: renderEditStringCell,
 };
 
 export const GRID_DATETIME_COL_DEF: GridColTypeDef = {
@@ -33,4 +35,5 @@ export const GRID_DATETIME_COL_DEF: GridColTypeDef = {
   sortComparator: gridDateComparer,
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
+  renderEditCell: renderEditStringCell,
 };

packages/grid/_modules_/grid/models/colDef/gridNumericColDef.ts

@@ -1,3 +1,4 @@
+import { renderEditStringCell } from '../../components/editCell/StringEditCell';
 import { gridNumberComparer } from '../../utils/sortingUtils';
 import { isNumber } from '../../utils/utils';
 import { getGridNumericColumnOperators } from './gridNumericOperators';
@@ -12,4 +13,5 @@ export const GRID_NUMERIC_COL_DEF: GridColTypeDef = {
   sortComparator: gridNumberComparer,
   valueFormatter: ({ value }) => (value && isNumber(value) && value.toLocaleString()) || value,
   filterOperators: getGridNumericColumnOperators(),
+  renderEditCell: renderEditStringCell,
 };