@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.
- package/CHANGELOG.md +231 -12
- package/DataGrid/DataGrid.js +0 -20
- package/DataGrid/useDataGridComponent.js +2 -6
- package/colDef/gridNumericOperators.d.ts +1 -1
- package/colDef/gridSingleSelectOperators.d.ts +1 -1
- package/colDef/gridStringOperators.d.ts +1 -1
- package/components/cell/GridEditInputCell.js +3 -8
- package/components/cell/GridEditSingleSelectCell.js +6 -38
- package/components/panel/filterPanel/GridFilterForm.d.ts +12 -0
- package/components/panel/filterPanel/GridFilterForm.js +29 -7
- package/components/panel/filterPanel/GridFilterPanel.d.ts +12 -0
- package/components/panel/filterPanel/GridFilterPanel.js +64 -19
- package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts +1 -1
- package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts +1 -1
- package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts +1 -1
- package/hooks/core/useGridInitialization.d.ts +1 -1
- package/hooks/core/useGridStateInitialization.d.ts +1 -1
- package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts +1 -1
- package/hooks/features/{editRows/gridEditRowsSelector.d.ts → editing/gridEditingSelectors.d.ts} +0 -0
- package/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
- package/hooks/features/editing/index.d.ts +1 -0
- package/hooks/features/editing/index.js +1 -0
- package/hooks/features/{editRows/useGridCellEditing.new.d.ts → editing/useGridCellEditing.d.ts} +0 -0
- package/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +21 -6
- package/hooks/features/{editRows/useGridEditing.new.d.ts → editing/useGridEditing.d.ts} +0 -0
- package/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +3 -3
- package/hooks/features/{editRows/useGridRowEditing.new.d.ts → editing/useGridRowEditing.d.ts} +0 -0
- package/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +20 -6
- package/hooks/features/index.d.ts +1 -1
- package/hooks/features/index.js +1 -1
- package/hooks/features/virtualization/useGridVirtualScroller.d.ts +1 -1
- package/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
- package/hooks/utils/useGridApi.d.ts +1 -1
- package/hooks/utils/useGridApiEventHandler.d.ts +2 -2
- package/hooks/utils/useGridApiRef.d.ts +1 -1
- package/hooks/utils/useGridInitializeState.d.ts +1 -1
- package/hooks/utils/useGridNativeEventListener.d.ts +1 -1
- package/hooks/utils/useGridSelector.d.ts +1 -1
- package/hooks/utils/useGridState.d.ts +1 -1
- package/hooks/utils/useGridVisibleRows.d.ts +2 -2
- package/index.js +1 -1
- package/internals/index.d.ts +1 -2
- package/internals/index.js +1 -2
- package/legacy/DataGrid/DataGrid.js +0 -20
- package/legacy/DataGrid/useDataGridComponent.js +2 -6
- package/legacy/components/cell/GridEditInputCell.js +3 -8
- package/legacy/components/cell/GridEditSingleSelectCell.js +6 -52
- package/legacy/components/panel/filterPanel/GridFilterForm.js +31 -7
- package/legacy/components/panel/filterPanel/GridFilterPanel.js +67 -18
- package/legacy/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
- package/legacy/hooks/features/editing/index.js +1 -0
- package/legacy/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +21 -6
- package/legacy/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +3 -3
- package/legacy/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +20 -6
- package/legacy/hooks/features/index.js +1 -1
- package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
- package/legacy/index.js +1 -1
- package/legacy/internals/index.js +1 -2
- package/legacy/models/params/gridEditCellParams.js +0 -4
- package/models/api/gridApiCommon.d.ts +2 -5
- package/models/api/gridApiCommunity.d.ts +1 -7
- package/models/api/gridEditingApi.d.ts +36 -121
- package/models/api/index.d.ts +1 -1
- package/models/events/gridEventLookup.d.ts +1 -15
- package/models/params/gridEditCellParams.d.ts +4 -17
- package/models/params/gridEditCellParams.js +0 -4
- package/models/params/gridRowParams.d.ts +4 -4
- package/models/props/DataGridProps.d.ts +0 -24
- package/modern/DataGrid/DataGrid.js +0 -20
- package/modern/DataGrid/useDataGridComponent.js +2 -4
- package/modern/components/cell/GridEditInputCell.js +3 -4
- package/modern/components/cell/GridEditSingleSelectCell.js +6 -34
- package/modern/components/panel/filterPanel/GridFilterForm.js +29 -7
- package/modern/components/panel/filterPanel/GridFilterPanel.js +62 -17
- package/modern/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
- package/modern/hooks/features/editing/index.js +1 -0
- package/modern/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +21 -6
- package/modern/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +3 -3
- package/modern/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +20 -6
- package/modern/hooks/features/index.js +1 -1
- package/modern/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/index.js +1 -2
- package/modern/models/params/gridEditCellParams.js +0 -4
- package/node/DataGrid/DataGrid.js +0 -20
- package/node/DataGrid/useDataGridComponent.js +3 -8
- package/node/components/cell/GridEditInputCell.js +3 -9
- package/node/components/cell/GridEditSingleSelectCell.js +6 -38
- package/node/components/panel/filterPanel/GridFilterForm.js +30 -7
- package/node/components/panel/filterPanel/GridFilterPanel.js +63 -19
- package/node/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js} +0 -0
- package/node/hooks/features/{editRows → editing}/index.js +4 -4
- package/node/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js} +28 -13
- package/node/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js} +4 -4
- package/node/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js} +28 -14
- package/node/hooks/features/index.js +4 -4
- package/node/hooks/features/virtualization/useGridVirtualScroller.js +2 -2
- package/node/index.js +1 -1
- package/node/internals/index.js +3 -17
- package/node/models/params/gridEditCellParams.js +0 -3
- package/package.json +2 -2
- package/hooks/features/editRows/index.d.ts +0 -1
- package/hooks/features/editRows/index.js +0 -1
- package/hooks/features/editRows/useGridCellEditing.old.d.ts +0 -4
- package/hooks/features/editRows/useGridCellEditing.old.js +0 -359
- package/hooks/features/editRows/useGridEditing.old.d.ts +0 -11
- package/hooks/features/editRows/useGridEditing.old.js +0 -167
- package/hooks/features/editRows/useGridRowEditing.old.d.ts +0 -4
- package/hooks/features/editRows/useGridRowEditing.old.js +0 -334
- package/legacy/hooks/features/editRows/index.js +0 -1
- package/legacy/hooks/features/editRows/useGridCellEditing.old.js +0 -411
- package/legacy/hooks/features/editRows/useGridEditing.old.js +0 -184
- package/legacy/hooks/features/editRows/useGridRowEditing.old.js +0 -505
- package/modern/hooks/features/editRows/index.js +0 -1
- package/modern/hooks/features/editRows/useGridCellEditing.old.js +0 -355
- package/modern/hooks/features/editRows/useGridEditing.old.js +0 -163
- package/modern/hooks/features/editRows/useGridRowEditing.old.js +0 -326
- package/node/hooks/features/editRows/useGridCellEditing.old.js +0 -380
- package/node/hooks/features/editRows/useGridEditing.old.js +0 -193
- 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
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
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 (!
|
|
116
|
+
if (!nextColumnWithOperator) {
|
|
76
117
|
return null;
|
|
77
118
|
}
|
|
78
119
|
|
|
79
|
-
return
|
|
80
|
-
|
|
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
|
|
91
|
-
return
|
|
92
|
-
}, [filterModel.items,
|
|
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
|
|
133
|
+
const newFilter = getNewFilter();
|
|
97
134
|
|
|
98
|
-
if (!
|
|
135
|
+
if (!newFilter) {
|
|
99
136
|
return;
|
|
100
137
|
}
|
|
101
138
|
|
|
102
|
-
apiRef.current.upsertFilterItems([...items,
|
|
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]
|
package/node/hooks/features/{editRows/gridEditRowsSelector.js → editing/gridEditingSelectors.js}
RENAMED
|
File without changes
|
|
@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _gridEditingSelectors = require("./gridEditingSelectors");
|
|
8
8
|
|
|
9
|
-
Object.keys(
|
|
9
|
+
Object.keys(_gridEditingSelectors).forEach(function (key) {
|
|
10
10
|
if (key === "default" || key === "__esModule") return;
|
|
11
|
-
if (key in exports && exports[key] ===
|
|
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
|
|
15
|
+
return _gridEditingSelectors[key];
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
});
|
package/node/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js}
RENAMED
|
@@ -23,7 +23,7 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
|
|
|
23
23
|
|
|
24
24
|
var _useGridApiMethod = require("../../utils/useGridApiMethod");
|
|
25
25
|
|
|
26
|
-
var
|
|
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.
|
|
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,
|
|
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,
|
|
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:
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
16
|
+
var _useGridCellEditing = require("./useGridCellEditing");
|
|
17
17
|
|
|
18
18
|
var _gridEditRowModel = require("../../../models/gridEditRowModel");
|
|
19
19
|
|
|
20
|
-
var _useGridRowEditing = require("./useGridRowEditing
|
|
20
|
+
var _useGridRowEditing = require("./useGridRowEditing");
|
|
21
21
|
|
|
22
|
-
var
|
|
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,
|
|
146
|
+
const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
|
|
147
147
|
return {
|
|
148
148
|
changeReason: editingState[id][field].changeReason
|
|
149
149
|
};
|
package/node/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js}
RENAMED
|
@@ -23,7 +23,7 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
|
|
|
23
23
|
|
|
24
24
|
var _useGridApiMethod = require("../../utils/useGridApiMethod");
|
|
25
25
|
|
|
26
|
-
var
|
|
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.
|
|
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,
|
|
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,
|
|
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
|
-
|
|
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:
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
59
|
+
var _editing = require("./editing");
|
|
60
60
|
|
|
61
|
-
Object.keys(
|
|
61
|
+
Object.keys(_editing).forEach(function (key) {
|
|
62
62
|
if (key === "default" || key === "__esModule") return;
|
|
63
|
-
if (key in exports && exports[key] ===
|
|
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
|
|
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
|
|
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,
|
|
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
package/node/internals/index.js
CHANGED
|
@@ -99,18 +99,12 @@ Object.defineProperty(exports, "densityStateInitializer", {
|
|
|
99
99
|
return _useGridDensity.densityStateInitializer;
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
|
-
Object.defineProperty(exports, "
|
|
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, "
|
|
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/
|
|
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.
|
|
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.
|
|
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;
|