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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/CHANGELOG.md +231 -12
  2. package/DataGrid/DataGrid.js +0 -20
  3. package/DataGrid/useDataGridComponent.js +2 -6
  4. package/colDef/gridNumericOperators.d.ts +1 -1
  5. package/colDef/gridSingleSelectOperators.d.ts +1 -1
  6. package/colDef/gridStringOperators.d.ts +1 -1
  7. package/components/cell/GridEditInputCell.js +3 -8
  8. package/components/cell/GridEditSingleSelectCell.js +6 -38
  9. package/components/panel/filterPanel/GridFilterForm.d.ts +12 -0
  10. package/components/panel/filterPanel/GridFilterForm.js +29 -7
  11. package/components/panel/filterPanel/GridFilterPanel.d.ts +12 -0
  12. package/components/panel/filterPanel/GridFilterPanel.js +64 -19
  13. package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts +1 -1
  14. package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts +1 -1
  15. package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts +1 -1
  16. package/hooks/core/useGridInitialization.d.ts +1 -1
  17. package/hooks/core/useGridStateInitialization.d.ts +1 -1
  18. package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts +1 -1
  19. package/hooks/features/{editRows/gridEditRowsSelector.d.ts → editing/gridEditingSelectors.d.ts} +0 -0
  20. package/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
  21. package/hooks/features/editing/index.d.ts +1 -0
  22. package/hooks/features/editing/index.js +1 -0
  23. package/hooks/features/{editRows/useGridCellEditing.new.d.ts → editing/useGridCellEditing.d.ts} +0 -0
  24. package/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +21 -6
  25. package/hooks/features/{editRows/useGridEditing.new.d.ts → editing/useGridEditing.d.ts} +0 -0
  26. package/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +3 -3
  27. package/hooks/features/{editRows/useGridRowEditing.new.d.ts → editing/useGridRowEditing.d.ts} +0 -0
  28. package/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +20 -6
  29. package/hooks/features/index.d.ts +1 -1
  30. package/hooks/features/index.js +1 -1
  31. package/hooks/features/virtualization/useGridVirtualScroller.d.ts +1 -1
  32. package/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  33. package/hooks/utils/useGridApi.d.ts +1 -1
  34. package/hooks/utils/useGridApiEventHandler.d.ts +2 -2
  35. package/hooks/utils/useGridApiRef.d.ts +1 -1
  36. package/hooks/utils/useGridInitializeState.d.ts +1 -1
  37. package/hooks/utils/useGridNativeEventListener.d.ts +1 -1
  38. package/hooks/utils/useGridSelector.d.ts +1 -1
  39. package/hooks/utils/useGridState.d.ts +1 -1
  40. package/hooks/utils/useGridVisibleRows.d.ts +2 -2
  41. package/index.js +1 -1
  42. package/internals/index.d.ts +1 -2
  43. package/internals/index.js +1 -2
  44. package/legacy/DataGrid/DataGrid.js +0 -20
  45. package/legacy/DataGrid/useDataGridComponent.js +2 -6
  46. package/legacy/components/cell/GridEditInputCell.js +3 -8
  47. package/legacy/components/cell/GridEditSingleSelectCell.js +6 -52
  48. package/legacy/components/panel/filterPanel/GridFilterForm.js +31 -7
  49. package/legacy/components/panel/filterPanel/GridFilterPanel.js +67 -18
  50. package/legacy/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
  51. package/legacy/hooks/features/editing/index.js +1 -0
  52. package/legacy/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +21 -6
  53. package/legacy/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +3 -3
  54. package/legacy/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +20 -6
  55. package/legacy/hooks/features/index.js +1 -1
  56. package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  57. package/legacy/index.js +1 -1
  58. package/legacy/internals/index.js +1 -2
  59. package/legacy/models/params/gridEditCellParams.js +0 -4
  60. package/models/api/gridApiCommon.d.ts +2 -5
  61. package/models/api/gridApiCommunity.d.ts +1 -7
  62. package/models/api/gridEditingApi.d.ts +36 -121
  63. package/models/api/index.d.ts +1 -1
  64. package/models/events/gridEventLookup.d.ts +1 -15
  65. package/models/params/gridEditCellParams.d.ts +4 -17
  66. package/models/params/gridEditCellParams.js +0 -4
  67. package/models/params/gridRowParams.d.ts +4 -4
  68. package/models/props/DataGridProps.d.ts +0 -24
  69. package/modern/DataGrid/DataGrid.js +0 -20
  70. package/modern/DataGrid/useDataGridComponent.js +2 -4
  71. package/modern/components/cell/GridEditInputCell.js +3 -4
  72. package/modern/components/cell/GridEditSingleSelectCell.js +6 -34
  73. package/modern/components/panel/filterPanel/GridFilterForm.js +29 -7
  74. package/modern/components/panel/filterPanel/GridFilterPanel.js +62 -17
  75. package/modern/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
  76. package/modern/hooks/features/editing/index.js +1 -0
  77. package/modern/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +21 -6
  78. package/modern/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +3 -3
  79. package/modern/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +20 -6
  80. package/modern/hooks/features/index.js +1 -1
  81. package/modern/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  82. package/modern/index.js +1 -1
  83. package/modern/internals/index.js +1 -2
  84. package/modern/models/params/gridEditCellParams.js +0 -4
  85. package/node/DataGrid/DataGrid.js +0 -20
  86. package/node/DataGrid/useDataGridComponent.js +3 -8
  87. package/node/components/cell/GridEditInputCell.js +3 -9
  88. package/node/components/cell/GridEditSingleSelectCell.js +6 -38
  89. package/node/components/panel/filterPanel/GridFilterForm.js +30 -7
  90. package/node/components/panel/filterPanel/GridFilterPanel.js +63 -19
  91. package/node/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
  92. package/node/hooks/features/{editRows → editing}/index.js +4 -4
  93. package/node/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +28 -13
  94. package/node/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +4 -4
  95. package/node/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +28 -14
  96. package/node/hooks/features/index.js +4 -4
  97. package/node/hooks/features/virtualization/useGridVirtualScroller.js +2 -2
  98. package/node/index.js +1 -1
  99. package/node/internals/index.js +3 -17
  100. package/node/models/params/gridEditCellParams.js +0 -3
  101. package/package.json +2 -2
  102. package/hooks/features/editRows/index.d.ts +0 -1
  103. package/hooks/features/editRows/index.js +0 -1
  104. package/hooks/features/editRows/useGridCellEditing.old.d.ts +0 -4
  105. package/hooks/features/editRows/useGridCellEditing.old.js +0 -359
  106. package/hooks/features/editRows/useGridEditing.old.d.ts +0 -11
  107. package/hooks/features/editRows/useGridEditing.old.js +0 -167
  108. package/hooks/features/editRows/useGridRowEditing.old.d.ts +0 -4
  109. package/hooks/features/editRows/useGridRowEditing.old.js +0 -334
  110. package/legacy/hooks/features/editRows/index.js +0 -1
  111. package/legacy/hooks/features/editRows/useGridCellEditing.old.js +0 -411
  112. package/legacy/hooks/features/editRows/useGridEditing.old.js +0 -184
  113. package/legacy/hooks/features/editRows/useGridRowEditing.old.js +0 -505
  114. package/modern/hooks/features/editRows/index.js +0 -1
  115. package/modern/hooks/features/editRows/useGridCellEditing.old.js +0 -355
  116. package/modern/hooks/features/editRows/useGridEditing.old.js +0 -163
  117. package/modern/hooks/features/editRows/useGridRowEditing.old.js +0 -326
  118. package/node/hooks/features/editRows/useGridCellEditing.old.js +0 -380
  119. package/node/hooks/features/editRows/useGridEditing.old.js +0 -193
  120. package/node/hooks/features/editRows/useGridRowEditing.old.js +0 -358
@@ -39,12 +39,18 @@ var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsS
39
39
 
40
40
  var _jsxRuntime = require("react/jsx-runtime");
41
41
 
42
- const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
42
+ const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children"];
43
43
 
44
44
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
45
45
 
46
46
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
47
47
 
48
+ const getGridFilter = col => ({
49
+ columnField: col.field,
50
+ operatorValue: col.filterOperators[0].value,
51
+ id: Math.round(Math.random() * 1e5)
52
+ });
53
+
48
54
  const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
49
55
  var _rootProps$components;
50
56
 
@@ -56,7 +62,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
56
62
  const {
57
63
  linkOperators = [_gridFilterItem.GridLinkOperator.And, _gridFilterItem.GridLinkOperator.Or],
58
64
  columnsSort,
59
- filterFormProps
65
+ filterFormProps,
66
+ getColumnForNewFilter
60
67
  } = props,
61
68
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
62
69
  const applyFilter = React.useCallback(item => {
@@ -65,41 +72,71 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
65
72
  const applyFilterLinkOperator = React.useCallback(operator => {
66
73
  apiRef.current.setFilterLinkOperator(operator);
67
74
  }, [apiRef]);
68
- const getDefaultItem = React.useCallback(() => {
69
- const firstColumnWithOperator = filterableColumns.find(colDef => {
70
- var _colDef$filterOperato;
75
+ const getDefaultFilter = React.useCallback(() => {
76
+ let nextColumnWithOperator;
77
+
78
+ if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
79
+ // To allow override the column for default (first) filter
80
+ const nextColumnFieldName = getColumnForNewFilter({
81
+ currentFilters: (filterModel == null ? void 0 : filterModel.items) || [],
82
+ columns: filterableColumns
83
+ });
84
+ nextColumnWithOperator = filterableColumns.find(({
85
+ field
86
+ }) => field === nextColumnFieldName);
87
+ } else {
88
+ nextColumnWithOperator = filterableColumns.find(colDef => {
89
+ var _colDef$filterOperato;
90
+
91
+ return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
92
+ });
93
+ }
94
+
95
+ if (!nextColumnWithOperator) {
96
+ return null;
97
+ }
71
98
 
72
- return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
99
+ return getGridFilter(nextColumnWithOperator);
100
+ }, [filterModel == null ? void 0 : filterModel.items, filterableColumns, getColumnForNewFilter]);
101
+ const getNewFilter = React.useCallback(() => {
102
+ if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
103
+ return getDefaultFilter();
104
+ }
105
+
106
+ const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean); // If no items are there in filterModel, we have to pass defaultFilter
107
+
108
+ const nextColumnFieldName = getColumnForNewFilter({
109
+ currentFilters: currentFilters,
110
+ columns: filterableColumns
73
111
  });
112
+ const nextColumnWithOperator = filterableColumns.find(({
113
+ field
114
+ }) => field === nextColumnFieldName);
74
115
 
75
- if (!firstColumnWithOperator) {
116
+ if (!nextColumnWithOperator) {
76
117
  return null;
77
118
  }
78
119
 
79
- return {
80
- columnField: firstColumnWithOperator.field,
81
- operatorValue: firstColumnWithOperator.filterOperators[0].value,
82
- id: Math.round(Math.random() * 1e5)
83
- };
84
- }, [filterableColumns]);
120
+ return getGridFilter(nextColumnWithOperator);
121
+ }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
85
122
  const items = React.useMemo(() => {
86
123
  if (filterModel.items.length) {
87
124
  return filterModel.items;
88
125
  }
89
126
 
90
- const defaultItem = getDefaultItem();
91
- return defaultItem ? [defaultItem] : [];
92
- }, [filterModel.items, getDefaultItem]);
127
+ const defaultFilter = getDefaultFilter();
128
+ return defaultFilter ? [defaultFilter] : [];
129
+ }, [filterModel.items, getDefaultFilter]);
93
130
  const hasMultipleFilters = items.length > 1;
94
131
 
95
132
  const addNewFilter = () => {
96
- const defaultItem = getDefaultItem();
133
+ const newFilter = getNewFilter();
97
134
 
98
- if (!defaultItem) {
135
+ if (!newFilter) {
99
136
  return;
100
137
  }
101
138
 
102
- apiRef.current.upsertFilterItems([...items, defaultItem]);
139
+ apiRef.current.upsertFilterItems([...items, newFilter]);
103
140
  };
104
141
 
105
142
  const deleteFilter = React.useCallback(item => {
@@ -177,6 +214,13 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
177
214
  valueInputProps: _propTypes.default.any
178
215
  }),
179
216
 
217
+ /**
218
+ * Function that returns the next filter item to be picked as default filter.
219
+ * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
220
+ * @returns {GridColDef['field']} The field to be used for the next filter.
221
+ */
222
+ getColumnForNewFilter: _propTypes.default.func,
223
+
180
224
  /**
181
225
  * Sets the available logic operators.
182
226
  * @default [GridLinkOperator.And, GridLinkOperator.Or]
@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var _gridEditRowsSelector = require("./gridEditRowsSelector");
7
+ var _gridEditingSelectors = require("./gridEditingSelectors");
8
8
 
9
- Object.keys(_gridEditRowsSelector).forEach(function (key) {
9
+ Object.keys(_gridEditingSelectors).forEach(function (key) {
10
10
  if (key === "default" || key === "__esModule") return;
11
- if (key in exports && exports[key] === _gridEditRowsSelector[key]) return;
11
+ if (key in exports && exports[key] === _gridEditingSelectors[key]) return;
12
12
  Object.defineProperty(exports, key, {
13
13
  enumerable: true,
14
14
  get: function () {
15
- return _gridEditRowsSelector[key];
15
+ return _gridEditingSelectors[key];
16
16
  }
17
17
  });
18
18
  });
@@ -23,7 +23,7 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
23
23
 
24
24
  var _useGridApiMethod = require("../../utils/useGridApiMethod");
25
25
 
26
- var _gridEditRowsSelector = require("./gridEditRowsSelector");
26
+ var _gridEditingSelectors = require("./gridEditingSelectors");
27
27
 
28
28
  var _keyboardUtils = require("../../../utils/keyboardUtils");
29
29
 
@@ -147,7 +147,8 @@ const useGridCellEditing = (apiRef, props) => {
147
147
 
148
148
  if (reason) {
149
149
  const newParams = (0, _extends2.default)({}, params, {
150
- reason
150
+ reason,
151
+ key: event.key
151
152
  });
152
153
  apiRef.current.publishEvent('cellEditStart', newParams, event);
153
154
  }
@@ -157,14 +158,21 @@ const useGridCellEditing = (apiRef, props) => {
157
158
  const {
158
159
  id,
159
160
  field,
160
- reason
161
+ reason,
162
+ key
161
163
  } = params;
162
164
  const startCellEditModeParams = {
163
165
  id,
164
166
  field
165
167
  };
166
168
 
167
- if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown || reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
169
+ if (reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
170
+ if (React.version.startsWith('18')) {
171
+ startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
172
+ } else {
173
+ startCellEditModeParams.deleteValue = true;
174
+ }
175
+ } else if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown) {
168
176
  startCellEditModeParams.deleteValue = true;
169
177
  }
170
178
 
@@ -188,7 +196,7 @@ const useGridCellEditing = (apiRef, props) => {
188
196
  }
189
197
 
190
198
  let ignoreModifications = reason === 'escapeKeyDown';
191
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
199
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
192
200
 
193
201
  if (editingState[id][field].isProcessingProps && !props.disableIgnoreModificationsIfProcessingProps) {
194
202
  // The user wants to stop editing the cell but we can't wait for the props to be processed.
@@ -211,7 +219,7 @@ const useGridCellEditing = (apiRef, props) => {
211
219
  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStart', props.onCellEditStart);
212
220
  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', props.onCellEditStop);
213
221
  const getCellMode = React.useCallback((id, field) => {
214
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
222
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
215
223
  const isEditing = editingState[id] && editingState[id][field];
216
224
  return isEditing ? _gridEditRowModel.GridCellModes.Edit : _gridEditRowModel.GridCellModes.View;
217
225
  }, [apiRef]);
@@ -293,10 +301,17 @@ const useGridCellEditing = (apiRef, props) => {
293
301
  const {
294
302
  id,
295
303
  field,
296
- deleteValue
304
+ deleteValue,
305
+ initialValue
297
306
  } = params;
307
+ let newValue = apiRef.current.getCellValue(id, field);
308
+
309
+ if (deleteValue || initialValue) {
310
+ newValue = deleteValue ? '' : initialValue;
311
+ }
312
+
298
313
  const newProps = {
299
- value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
314
+ value: newValue,
300
315
  error: false,
301
316
  isProcessingProps: false
302
317
  };
@@ -338,7 +353,7 @@ const useGridCellEditing = (apiRef, props) => {
338
353
  return;
339
354
  }
340
355
 
341
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
356
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
342
357
  const {
343
358
  error,
344
359
  isProcessingProps
@@ -406,7 +421,7 @@ const useGridCellEditing = (apiRef, props) => {
406
421
  parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
407
422
  }
408
423
 
409
- let editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
424
+ let editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
410
425
  let newProps = (0, _extends2.default)({}, editingState[id][field], {
411
426
  value: parsedValue,
412
427
  changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
@@ -432,7 +447,7 @@ const useGridCellEditing = (apiRef, props) => {
432
447
  return false;
433
448
  }
434
449
 
435
- editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
450
+ editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
436
451
  newProps = (0, _extends2.default)({}, newProps, {
437
452
  isProcessingProps: false
438
453
  }); // We don't update the value with the one coming from the props pre-processing
@@ -441,12 +456,12 @@ const useGridCellEditing = (apiRef, props) => {
441
456
 
442
457
  newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
443
458
  updateOrDeleteFieldState(id, field, newProps);
444
- editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
459
+ editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
445
460
  return !((_editingState$id = editingState[id]) != null && (_editingState$id$fiel = _editingState$id[field]) != null && _editingState$id$fiel.error);
446
461
  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
447
462
  const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
448
463
  const column = apiRef.current.getColumn(field);
449
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
464
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
450
465
  const {
451
466
  value
452
467
  } = editingState[id][field];
@@ -13,13 +13,13 @@ var React = _interopRequireWildcard(require("react"));
13
13
 
14
14
  var _useGridApiMethod = require("../../utils/useGridApiMethod");
15
15
 
16
- var _useGridCellEditing = require("./useGridCellEditing.new");
16
+ var _useGridCellEditing = require("./useGridCellEditing");
17
17
 
18
18
  var _gridEditRowModel = require("../../../models/gridEditRowModel");
19
19
 
20
- var _useGridRowEditing = require("./useGridRowEditing.new");
20
+ var _useGridRowEditing = require("./useGridRowEditing");
21
21
 
22
- var _gridEditRowsSelector = require("./gridEditRowsSelector");
22
+ var _gridEditingSelectors = require("./gridEditingSelectors");
23
23
 
24
24
  var _gridRowsUtils = require("../rows/gridRowsUtils");
25
25
 
@@ -143,7 +143,7 @@ const useGridEditing = (apiRef, props) => {
143
143
  return props.editMode === _gridEditRowModel.GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
144
144
  }, [apiRef, props.editMode]);
145
145
  const getEditCellMeta = React.useCallback((id, field) => {
146
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
146
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
147
147
  return {
148
148
  changeReason: editingState[id][field].changeReason
149
149
  };
@@ -23,7 +23,7 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
23
23
 
24
24
  var _useGridApiMethod = require("../../utils/useGridApiMethod");
25
25
 
26
- var _gridEditRowsSelector = require("./gridEditRowsSelector");
26
+ var _gridEditingSelectors = require("./gridEditingSelectors");
27
27
 
28
28
  var _keyboardUtils = require("../../../utils/keyboardUtils");
29
29
 
@@ -204,6 +204,7 @@ const useGridRowEditing = (apiRef, props) => {
204
204
  const rowParams = apiRef.current.getRowParams(params.id);
205
205
  const newParams = (0, _extends2.default)({}, rowParams, {
206
206
  field: params.field,
207
+ key: event.key,
207
208
  reason
208
209
  });
209
210
  apiRef.current.publishEvent('rowEditStart', newParams, event);
@@ -214,14 +215,21 @@ const useGridRowEditing = (apiRef, props) => {
214
215
  const {
215
216
  id,
216
217
  field,
217
- reason
218
+ reason,
219
+ key
218
220
  } = params;
219
221
  const startRowEditModeParams = {
220
222
  id,
221
223
  fieldToFocus: field
222
224
  };
223
225
 
224
- if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown || reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
226
+ if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
227
+ if (React.version.startsWith('18')) {
228
+ startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
229
+ } else {
230
+ startRowEditModeParams.deleteValue = !!field;
231
+ }
232
+ } else if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
225
233
  startRowEditModeParams.deleteValue = !!field;
226
234
  }
227
235
 
@@ -245,7 +253,7 @@ const useGridRowEditing = (apiRef, props) => {
245
253
  }
246
254
 
247
255
  let ignoreModifications = reason === 'escapeKeyDown';
248
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
256
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
249
257
 
250
258
  if (!ignoreModifications && !props.disableIgnoreModificationsIfProcessingProps) {
251
259
  // The user wants to stop editing the cell but we can't wait for the props to be processed.
@@ -275,7 +283,7 @@ const useGridRowEditing = (apiRef, props) => {
275
283
  return _gridEditRowModel.GridRowModes.View;
276
284
  }
277
285
 
278
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
286
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
279
287
  const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
280
288
  return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
281
289
  }, [apiRef, props.editMode]);
@@ -360,7 +368,8 @@ const useGridRowEditing = (apiRef, props) => {
360
368
  const {
361
369
  id,
362
370
  fieldToFocus,
363
- deleteValue
371
+ deleteValue,
372
+ initialValue
364
373
  } = params;
365
374
  const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
366
375
  const newProps = columnFields.reduce((acc, field) => {
@@ -370,9 +379,14 @@ const useGridRowEditing = (apiRef, props) => {
370
379
  return acc;
371
380
  }
372
381
 
373
- const shouldDeleteValue = deleteValue && fieldToFocus === field;
382
+ let newValue = apiRef.current.getCellValue(id, field);
383
+
384
+ if (fieldToFocus === field && (deleteValue || initialValue)) {
385
+ newValue = deleteValue ? '' : initialValue;
386
+ }
387
+
374
388
  acc[field] = {
375
- value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
389
+ value: newValue,
376
390
  error: false,
377
391
  isProcessingProps: false
378
392
  };
@@ -417,7 +431,7 @@ const useGridRowEditing = (apiRef, props) => {
417
431
  return;
418
432
  }
419
433
 
420
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
434
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
421
435
  const row = apiRef.current.getRow(id);
422
436
  const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
423
437
 
@@ -484,7 +498,7 @@ const useGridRowEditing = (apiRef, props) => {
484
498
  parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
485
499
  }
486
500
 
487
- let editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
501
+ let editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
488
502
  let newProps = (0, _extends2.default)({}, editingState[id][field], {
489
503
  value: parsedValue,
490
504
  changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
@@ -519,7 +533,7 @@ const useGridRowEditing = (apiRef, props) => {
519
533
  return;
520
534
  }
521
535
 
522
- editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
536
+ editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
523
537
  processedProps = (0, _extends2.default)({}, processedProps, {
524
538
  isProcessingProps: false
525
539
  }); // We don't reuse the value from the props pre-processing because when the
@@ -547,7 +561,7 @@ const useGridRowEditing = (apiRef, props) => {
547
561
  isProcessingProps: true
548
562
  });
549
563
  updateOrDeleteFieldState(id, thisField, fieldProps);
550
- editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
564
+ editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
551
565
  const _editingState$id2 = editingState[id],
552
566
  otherFieldsProps = (0, _objectWithoutPropertiesLoose2.default)(_editingState$id2, [thisField].map(_toPropertyKey2.default));
553
567
  const promise = Promise.resolve(fieldColumn.preProcessEditCellProps({
@@ -573,7 +587,7 @@ const useGridRowEditing = (apiRef, props) => {
573
587
  });
574
588
  Promise.all(promises).then(() => {
575
589
  if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
576
- editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
590
+ editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
577
591
  resolve(!editingState[id][field].error);
578
592
  } else {
579
593
  resolve(false);
@@ -582,7 +596,7 @@ const useGridRowEditing = (apiRef, props) => {
582
596
  });
583
597
  }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
584
598
  const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
585
- const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
599
+ const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
586
600
  const row = apiRef.current.getRow(id);
587
601
  let rowUpdate = (0, _extends2.default)({}, row);
588
602
  Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
@@ -56,15 +56,15 @@ Object.keys(_density).forEach(function (key) {
56
56
  });
57
57
  });
58
58
 
59
- var _editRows = require("./editRows");
59
+ var _editing = require("./editing");
60
60
 
61
- Object.keys(_editRows).forEach(function (key) {
61
+ Object.keys(_editing).forEach(function (key) {
62
62
  if (key === "default" || key === "__esModule") return;
63
- if (key in exports && exports[key] === _editRows[key]) return;
63
+ if (key in exports && exports[key] === _editing[key]) return;
64
64
  Object.defineProperty(exports, key, {
65
65
  enumerable: true,
66
66
  get: function () {
67
- return _editRows[key];
67
+ return _editing[key];
68
68
  }
69
69
  });
70
70
  });
@@ -28,7 +28,7 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
28
28
 
29
29
  var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
30
30
 
31
- var _gridEditRowsSelector = require("../editRows/gridEditRowsSelector");
31
+ var _gridEditingSelectors = require("../editing/gridEditingSelectors");
32
32
 
33
33
  var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
34
34
 
@@ -109,7 +109,7 @@ const useGridVirtualScroller = props => {
109
109
  const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
110
110
  const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
111
111
  const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
112
- const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditRowsSelector.gridEditRowsStateSelector);
112
+ const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
113
113
  const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSelectionSelector.selectedIdsLookupSelector);
114
114
  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
115
115
  const renderZoneRef = React.useRef(null);
package/node/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v6.0.0-alpha.2
1
+ /** @license MUI v6.0.0-alpha.3
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -99,18 +99,12 @@ Object.defineProperty(exports, "densityStateInitializer", {
99
99
  return _useGridDensity.densityStateInitializer;
100
100
  }
101
101
  });
102
- Object.defineProperty(exports, "editingStateInitializer_new", {
102
+ Object.defineProperty(exports, "editingStateInitializer", {
103
103
  enumerable: true,
104
104
  get: function () {
105
105
  return _useGridEditing.editingStateInitializer;
106
106
  }
107
107
  });
108
- Object.defineProperty(exports, "editingStateInitializer_old", {
109
- enumerable: true,
110
- get: function () {
111
- return _useGridEditing2.editingStateInitializer;
112
- }
113
- });
114
108
  Object.defineProperty(exports, "exportAs", {
115
109
  enumerable: true,
116
110
  get: function () {
@@ -303,18 +297,12 @@ Object.defineProperty(exports, "useGridDimensions", {
303
297
  return _useGridDimensions.useGridDimensions;
304
298
  }
305
299
  });
306
- Object.defineProperty(exports, "useGridEditing_new", {
300
+ Object.defineProperty(exports, "useGridEditing", {
307
301
  enumerable: true,
308
302
  get: function () {
309
303
  return _useGridEditing.useGridEditing;
310
304
  }
311
305
  });
312
- Object.defineProperty(exports, "useGridEditing_old", {
313
- enumerable: true,
314
- get: function () {
315
- return _useGridEditing2.useGridEditing;
316
- }
317
- });
318
306
  Object.defineProperty(exports, "useGridEvents", {
319
307
  enumerable: true,
320
308
  get: function () {
@@ -496,9 +484,7 @@ var _useGridPagination = require("../hooks/features/pagination/useGridPagination
496
484
 
497
485
  var _useGridPreferencesPanel = require("../hooks/features/preferencesPanel/useGridPreferencesPanel");
498
486
 
499
- var _useGridEditing = require("../hooks/features/editRows/useGridEditing.new");
500
-
501
- var _useGridEditing2 = require("../hooks/features/editRows/useGridEditing.old");
487
+ var _useGridEditing = require("../hooks/features/editing/useGridEditing");
502
488
 
503
489
  var _useGridRows = require("../hooks/features/rows/useGridRows");
504
490
 
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.GridCellEditStopReasons = exports.GridCellEditStartReasons = void 0;
7
- // TODO v6 - remove
8
7
 
9
8
  /**
10
9
  * Params passed to `apiRef.current.setEditCellValue`.
11
10
  */
12
- // TODO v6 - remove
13
- // TODO v6 - remove
14
11
  var GridCellEditStartReasons;
15
12
  /**
16
13
  * Params passed to the `cellEditStart` event.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-data-grid",
3
- "version": "6.0.0-alpha.2",
3
+ "version": "6.0.0-alpha.3",
4
4
  "description": "The community edition of the data grid component (MUI X).",
5
5
  "author": "MUI Team",
6
6
  "main": "./node/index.js",
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@babel/runtime": "^7.19.0",
39
- "@mui/utils": "^5.10.6",
39
+ "@mui/utils": "^5.10.9",
40
40
  "clsx": "^1.2.1",
41
41
  "prop-types": "^15.8.1",
42
42
  "reselect": "^4.1.6"
@@ -1 +0,0 @@
1
- export * from './gridEditRowsSelector';
@@ -1 +0,0 @@
1
- export * from './gridEditRowsSelector';
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
3
- import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
4
- export declare const useCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'onCellEditCommit' | 'onCellEditStart' | 'onCellEditStop' | 'experimentalFeatures'>) => void;