@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
@@ -1,334 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import * as React from 'react';
3
- import { useEventCallback } from '@mui/material/utils';
4
- import { useGridApiMethod } from '../../utils/useGridApiMethod';
5
- import { GridRowModes, GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
6
- import { useGridSelector } from '../../utils/useGridSelector';
7
- import { gridColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
8
- import { gridEditRowsStateSelector } from './gridEditRowsSelector';
9
- import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
10
- import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
11
- export const useGridRowEditing = (apiRef, props) => {
12
- var _props$experimentalFe2, _props$experimentalFe4;
13
-
14
- const focusTimeout = React.useRef(null);
15
- const nextFocusedCell = React.useRef(null);
16
- const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
17
-
18
- const buildCallback = callback => (...args) => {
19
- if (props.editMode === GridEditModes.Row) {
20
- callback(...args);
21
- }
22
- };
23
-
24
- const setRowMode = React.useCallback((id, mode) => {
25
- if (mode === apiRef.current.getRowMode(id)) {
26
- return;
27
- }
28
-
29
- apiRef.current.setState(state => {
30
- const newEditRowsState = _extends({}, state.editRows);
31
-
32
- if (mode === GridRowModes.Edit) {
33
- newEditRowsState[id] = {};
34
- columns.forEach(column => {
35
- const cellParams = apiRef.current.getCellParams(id, column.field);
36
-
37
- if (cellParams.isEditable) {
38
- newEditRowsState[id][column.field] = {
39
- value: cellParams.value
40
- };
41
- }
42
- });
43
- } else {
44
- delete newEditRowsState[id];
45
- }
46
-
47
- return _extends({}, state, {
48
- editRows: newEditRowsState
49
- });
50
- });
51
- apiRef.current.forceUpdate();
52
- }, [apiRef, columns]);
53
- const getRowMode = React.useCallback(id => {
54
- if (props.editMode === GridEditModes.Cell) {
55
- return GridRowModes.View;
56
- }
57
-
58
- const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
59
- return editRowsState[id] ? GridRowModes.Edit : GridRowModes.View;
60
- }, [apiRef, props.editMode]);
61
- const commitRowChange = React.useCallback((id, event = {}) => {
62
- var _props$experimentalFe;
63
-
64
- if (props.editMode === GridEditModes.Cell) {
65
- throw new Error(`MUI: You can't commit changes when the edit mode is 'cell'.`);
66
- }
67
-
68
- apiRef.current.unstable_runPendingEditCellValueMutation(id);
69
- const model = apiRef.current.getEditRowsModel();
70
- const editRowProps = model[id];
71
-
72
- if (!editRowProps) {
73
- throw new Error(`MUI: Row at id: ${id} is not being edited.`);
74
- }
75
-
76
- if ((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.preventCommitWhileValidating) {
77
- const isValid = Object.keys(editRowProps).reduce((acc, field) => {
78
- return acc && !editRowProps[field].isValidating && !editRowProps[field].error;
79
- }, true);
80
-
81
- if (!isValid) {
82
- return false;
83
- }
84
- }
85
-
86
- const hasFieldWithError = Object.values(editRowProps).some(value => !!value.error);
87
-
88
- if (hasFieldWithError) {
89
- return false;
90
- }
91
-
92
- const fieldsWithValidator = Object.keys(editRowProps).filter(field => {
93
- const column = apiRef.current.getColumn(field);
94
- return typeof column.preProcessEditCellProps === 'function';
95
- });
96
-
97
- if (fieldsWithValidator.length > 0) {
98
- const row = apiRef.current.getRow(id);
99
- const validatorErrors = fieldsWithValidator.map(async field => {
100
- const column = apiRef.current.getColumn(field);
101
- const newEditCellProps = await Promise.resolve(column.preProcessEditCellProps({
102
- id,
103
- row,
104
- props: editRowProps[field]
105
- }));
106
- apiRef.current.unstable_setEditCellProps({
107
- id,
108
- field,
109
- props: newEditCellProps
110
- });
111
- return newEditCellProps.error;
112
- });
113
- return Promise.all(validatorErrors).then(errors => {
114
- if (errors.some(error => !!error)) {
115
- return false;
116
- }
117
-
118
- apiRef.current.publishEvent('rowEditCommit', id, event);
119
- return true;
120
- });
121
- }
122
-
123
- apiRef.current.publishEvent('rowEditCommit', id, event);
124
- return true;
125
- }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
126
- const setRowEditingEditCellValue = React.useCallback(params => {
127
- const model = apiRef.current.getEditRowsModel();
128
- const editRow = model[params.id];
129
- const row = apiRef.current.getRow(params.id);
130
- let isValid = true;
131
- return new Promise(resolve => {
132
- Object.keys(editRow).forEach(async field => {
133
- const column = apiRef.current.getColumn(field);
134
- let editCellProps = field === params.field ? {
135
- value: params.value
136
- } : editRow[field]; // setEditCellProps runs the value parser and returns the updated props
137
-
138
- editCellProps = apiRef.current.unstable_setEditCellProps({
139
- id: params.id,
140
- field,
141
- props: _extends({}, editCellProps, {
142
- isValidating: true
143
- })
144
- });
145
-
146
- if (column.preProcessEditCellProps) {
147
- editCellProps = await Promise.resolve(column.preProcessEditCellProps({
148
- id: params.id,
149
- row,
150
- props: _extends({}, editCellProps, {
151
- value: field === params.field ? apiRef.current.unstable_parseValue(params.id, field, params.value) : editCellProps.value
152
- })
153
- }));
154
- }
155
-
156
- if (editCellProps.error) {
157
- isValid = false;
158
- }
159
-
160
- apiRef.current.unstable_setEditCellProps({
161
- id: params.id,
162
- field,
163
- props: _extends({}, editCellProps, {
164
- isValidating: false
165
- })
166
- });
167
- });
168
- resolve(isValid);
169
- });
170
- }, [apiRef]);
171
- const rowEditingApi = {
172
- setRowMode,
173
- getRowMode,
174
- commitRowChange,
175
- unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
176
- };
177
- useGridApiMethod(apiRef, rowEditingApi, 'EditRowApi');
178
- const handleCellKeyDown = React.useCallback(async (params, event) => {
179
- // Wait until IME is settled for Asian languages like Japanese and Chinese
180
- // TODO: `event.which` is depricated but this is a temporary workaround
181
- if (event.which === 229) {
182
- return;
183
- }
184
-
185
- const {
186
- cellMode,
187
- isEditable
188
- } = params;
189
-
190
- if (!isEditable) {
191
- return;
192
- }
193
-
194
- const isEditMode = cellMode === GridCellModes.Edit;
195
- const rowParams = apiRef.current.getRowParams(params.id);
196
-
197
- if (isEditMode) {
198
- if (event.key === 'Enter') {
199
- var _props$experimentalFe3;
200
-
201
- // TODO: check the return before firing 'rowEditStop'
202
- // On cell editing, it won't exits the edit mode with error
203
- const isValid = await apiRef.current.commitRowChange(params.id);
204
-
205
- if (!isValid && (_props$experimentalFe3 = props.experimentalFeatures) != null && _props$experimentalFe3.preventCommitWhileValidating) {
206
- return;
207
- }
208
-
209
- apiRef.current.publishEvent('rowEditStop', rowParams, event);
210
- } else if (event.key === 'Escape') {
211
- apiRef.current.publishEvent('rowEditStop', rowParams, event);
212
- }
213
- } else if (event.key === 'Enter') {
214
- apiRef.current.publishEvent('rowEditStart', rowParams, event);
215
- }
216
- }, [apiRef, (_props$experimentalFe4 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe4.preventCommitWhileValidating]);
217
- const handleCellDoubleClick = React.useCallback((params, event) => {
218
- if (!params.isEditable) {
219
- return;
220
- }
221
-
222
- const rowParams = apiRef.current.getRowParams(params.id);
223
- apiRef.current.publishEvent('rowEditStart', rowParams, event);
224
- }, [apiRef]);
225
- const handleEditCellPropsChange = React.useCallback(params => {
226
- const row = apiRef.current.getRow(params.id);
227
- const model = apiRef.current.getEditRowsModel();
228
- const editRow = model[params.id];
229
- Object.keys(editRow).forEach(async field => {
230
- const column = apiRef.current.getColumn(field);
231
-
232
- if (column.preProcessEditCellProps) {
233
- const editCellProps = field === params.field ? params.props : editRow[field];
234
- const newEditCellProps = await Promise.resolve(column.preProcessEditCellProps({
235
- id: params.id,
236
- row,
237
- props: editCellProps
238
- }));
239
- apiRef.current.unstable_setEditCellProps({
240
- id: params.id,
241
- field,
242
- props: newEditCellProps
243
- });
244
- } else if (field === params.field) {
245
- apiRef.current.unstable_setEditCellProps(params);
246
- }
247
- });
248
- }, [apiRef]);
249
- const handleRowEditStart = React.useCallback(params => {
250
- apiRef.current.setRowMode(params.id, GridRowModes.Edit);
251
- }, [apiRef]);
252
- const handleRowEditStop = React.useCallback((params, event) => {
253
- apiRef.current.setRowMode(params.id, GridRowModes.View);
254
-
255
- if (event.key === 'Enter') {
256
- apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
257
- }
258
- }, [apiRef]);
259
- const handleRowEditCommit = React.useCallback(id => {
260
- const model = apiRef.current.getEditRowsModel();
261
- const editRow = model[id];
262
-
263
- if (!editRow) {
264
- throw new Error(`MUI: Row at id: ${id} is not being edited.`);
265
- }
266
-
267
- const row = apiRef.current.getRow(id);
268
-
269
- if (row) {
270
- let rowUpdate = _extends({}, row);
271
-
272
- Object.keys(editRow).forEach(field => {
273
- const column = apiRef.current.getColumn(field);
274
- const value = editRow[field].value;
275
-
276
- if (column.valueSetter) {
277
- rowUpdate = column.valueSetter({
278
- row: rowUpdate,
279
- value
280
- });
281
- } else {
282
- rowUpdate[field] = value;
283
- }
284
- });
285
- apiRef.current.updateRows([rowUpdate]);
286
- }
287
- }, [apiRef]);
288
- const handleCellFocusIn = React.useCallback(params => {
289
- nextFocusedCell.current = params;
290
- }, []);
291
-
292
- const commitPropsAndExit = async (params, event) => {
293
- if (params.cellMode === GridCellModes.View) {
294
- return;
295
- }
296
-
297
- nextFocusedCell.current = null;
298
- focusTimeout.current = setTimeout(async () => {
299
- var _nextFocusedCell$curr;
300
-
301
- if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
302
- await apiRef.current.commitRowChange(params.id, event);
303
- const rowParams = apiRef.current.getRowParams(params.id);
304
- apiRef.current.publishEvent('rowEditStop', rowParams, event);
305
- }
306
- });
307
- };
308
-
309
- const handleCellFocusOut = useEventCallback((params, event) => {
310
- commitPropsAndExit(params, event);
311
- });
312
- const handleColumnHeaderDragStart = useEventCallback(() => {
313
- const cell = gridFocusCellSelector(apiRef);
314
-
315
- if (!cell) {
316
- return;
317
- }
318
-
319
- const params = apiRef.current.getCellParams(cell.id, cell.field);
320
- commitPropsAndExit(params, {});
321
- });
322
- useGridApiEventHandler(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
323
- useGridApiEventHandler(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
324
- useGridApiEventHandler(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
325
- useGridApiEventHandler(apiRef, 'rowEditStart', buildCallback(handleRowEditStart));
326
- useGridApiEventHandler(apiRef, 'rowEditStop', buildCallback(handleRowEditStop));
327
- useGridApiEventHandler(apiRef, 'rowEditCommit', buildCallback(handleRowEditCommit));
328
- useGridApiEventHandler(apiRef, 'cellFocusIn', buildCallback(handleCellFocusIn));
329
- useGridApiEventHandler(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
330
- useGridApiEventHandler(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
331
- useGridApiOptionHandler(apiRef, 'rowEditCommit', props.onRowEditCommit);
332
- useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
333
- useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
334
- };
@@ -1 +0,0 @@
1
- export * from './gridEditRowsSelector';