@mui/x-data-grid-generator 6.0.0-alpha.1 → 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 +303 -8
- package/index.js +1 -1
- package/legacy/index.js +1 -1
- package/legacy/renderer/renderEditCountry.js +32 -14
- package/legacy/renderer/renderEditCurrency.js +32 -14
- package/legacy/renderer/renderEditIncoterm.js +36 -18
- package/legacy/renderer/renderEditRating.js +33 -16
- package/modern/index.js +1 -1
- package/modern/renderer/renderEditCountry.js +6 -10
- package/modern/renderer/renderEditCurrency.js +6 -10
- package/modern/renderer/renderEditIncoterm.js +7 -11
- package/modern/renderer/renderEditRating.js +7 -12
- package/node/index.js +1 -1
- package/node/renderer/renderEditCountry.js +6 -10
- package/node/renderer/renderEditCurrency.js +6 -10
- package/node/renderer/renderEditIncoterm.js +7 -11
- package/node/renderer/renderEditRating.js +7 -12
- package/package.json +3 -3
- package/renderer/renderEditCountry.js +6 -10
- package/renderer/renderEditCurrency.js +6 -10
- package/renderer/renderEditIncoterm.js +7 -11
- package/renderer/renderEditRating.js +7 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,290 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## v6.0.0-alpha.3
|
|
7
|
+
|
|
8
|
+
_Oct 13, 2022_
|
|
9
|
+
|
|
10
|
+
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
|
|
11
|
+
|
|
12
|
+
- ⌚️ New components to edit date and time with <kbd>keyboard</kbd>—without using any modal or dropdown UI.
|
|
13
|
+
Please check out our [documentation](https://next.mui.com/x/react-date-pickers/fields/) to discover those new components.
|
|
14
|
+
- [`DateField`](https://next.mui.com/x/react-date-pickers/date-field/) to edit date
|
|
15
|
+
- [`TimeField`](https://next.mui.com/x/react-date-pickers/time-field/) to edit time
|
|
16
|
+
- [`DateTimeField`](https://next.mui.com/x/react-date-pickers/date-time-field/) to edit date and time
|
|
17
|
+
- [`MultiInputDateRangeField` / `SingleInputDateRangeField`](https://next.mui.com/x/react-date-pickers/date-range-field/) to edit date range
|
|
18
|
+
- [`MultiInputTimeRangeField`](https://next.mui.com/x/react-date-pickers/time-range-field/) to edit time range with two inputs
|
|
19
|
+
- [`MultiInputDateTimeRangeField`](https://next.mui.com/x/react-date-pickers/date-time-range-field/) to edit date and time range with two inputs
|
|
20
|
+
|
|
21
|
+
⚠️ These components are unstable.
|
|
22
|
+
They might receive breaking changes on their props to have the best components possible by the time of the stable release.
|
|
23
|
+
|
|
24
|
+
- 📝 Allow to limit to one filter per column for `DataGridPro` and `DataGridPremium` (#6333) @MBilalShafi
|
|
25
|
+
- 📚 New [page describing the validation props on each picker](https://next.mui.com/x/react-date-pickers/validation/) (#6064) @flaviendelangle
|
|
26
|
+
- 📚 Documentation improvements
|
|
27
|
+
- 🐞 Bugfixes
|
|
28
|
+
|
|
29
|
+
### `@mui/x-data-grid@v6.0.0-alpha.3` / `@mui/x-data-grid-pro@v6.0.0-alpha.3` / `@mui/x-data-grid-premium@v6.0.0-alpha.3`
|
|
30
|
+
|
|
31
|
+
#### Breaking changes
|
|
32
|
+
|
|
33
|
+
- [DataGrid] Remove legacy editing API
|
|
34
|
+
|
|
35
|
+
The editing API that is enabled by default was replaced with a new API that contains better support for server-side persistence, validation and customization. This new editing feature was already available in v5 under the `newEditingApi` experimental flag. In v6, this flag can be removed.
|
|
36
|
+
|
|
37
|
+
```diff
|
|
38
|
+
<DataGrid
|
|
39
|
+
- experimentalFeatures={{ newEditingApi: true }}
|
|
40
|
+
/>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
For users that didn't migrate to the new editing API in v5, additional work may be needed because the new API is not equivalent to the legacy API. Although, some migration steps are available to help in this task.
|
|
44
|
+
|
|
45
|
+
- The `editCellPropsChange` event was removed. If you still need it please file a new issue so we can propose an alternative.
|
|
46
|
+
- The `cellEditCommit` event was removed and the `processRowUpdate` prop can be used in place. More information, check the [docs](https://next.mui.com/x/react-data-grid/editing/#persistence) section about the topic.
|
|
47
|
+
- The `editRowsModel` and `onEditRowsModelChange` props were removed. The [`cellModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) props can be used to achieve the same goal.
|
|
48
|
+
- The following API methods were removed:
|
|
49
|
+
- Use `apiRef.current.stopCellEditMode` to replace `apiRef.current.commitCellChange`
|
|
50
|
+
- Use `apiRef.current.startCellEditMode` to replace `apiRef.current.setCellMode(id, field, 'edit')`
|
|
51
|
+
- Use `apiRef.current.stopRowEditMode` to replace `apiRef.current.commitRowChange`
|
|
52
|
+
- Use `apiRef.current.startRowMode` to replace `apiRef.current.setRowMode(id, 'edit')`
|
|
53
|
+
- Use the [`cellModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) props to replace `apiRef.current.setEditRowsModel`
|
|
54
|
+
|
|
55
|
+
#### Changes
|
|
56
|
+
|
|
57
|
+
- [DataGrid] Fix start edit mode with printable character in React 18 (#6257) @m4theushw
|
|
58
|
+
- [DataGrid] Remove legacy editing API (#6016) @m4theushw
|
|
59
|
+
- [DataGrid] Simplify `useGridApiContext` and `useGridApiRef` type overrides (#6423) @cherniavskii
|
|
60
|
+
- [DataGrid] Use generics instead of verbose state overrides (#6409) @cherniavskii
|
|
61
|
+
- [DataGridPro] Allow to limit to one filter per column (#6333) @MBilalShafi
|
|
62
|
+
|
|
63
|
+
### `@mui/x-date-pickers@v6.0.0-alpha.3` / `@mui/x-date-pickers-pro@v6.0.0-alpha.3`
|
|
64
|
+
|
|
65
|
+
#### Breaking changes
|
|
66
|
+
|
|
67
|
+
- All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the [MUI Base documentation](https://mui.com/base/getting-started/usage/#shared-props).
|
|
68
|
+
|
|
69
|
+
Some of the names have also been prefixed by `desktop` when it was unclear that the behavior was only applied on the desktop version of the pickers (or the responsive version when used on a desktop).
|
|
70
|
+
|
|
71
|
+
The `DialogProps` prop has been replaced by a `dialog` component props slot on responsive and mobile pickers:
|
|
72
|
+
|
|
73
|
+
```diff
|
|
74
|
+
// Same on MobileDatePicker, DateTimePicker, MobileDateTimePicker,
|
|
75
|
+
// TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker.
|
|
76
|
+
<DatePicker
|
|
77
|
+
- DialogProps={{ backgroundColor: 'red' }}
|
|
78
|
+
+ componentsProps={{ dialog: { backgroundColor: 'red }}}
|
|
79
|
+
/>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The `PaperProps` prop has been replaced by a `desktopPaper` component props slot on all responsive and desktop pickers:
|
|
83
|
+
|
|
84
|
+
```diff
|
|
85
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
86
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
87
|
+
<DatePicker
|
|
88
|
+
- PaperProps={{ backgroundColor: 'red' }}
|
|
89
|
+
+ componentsProps={{ desktopPaper: { backgroundColor: 'red }}}
|
|
90
|
+
/>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
The `PopperProps` prop has been replaced by a `popper` component props slot on all responsive and desktop pickers:
|
|
94
|
+
|
|
95
|
+
```diff
|
|
96
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
97
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
98
|
+
<DatePicker
|
|
99
|
+
- PopperProps={{ onClick: handleClick }}
|
|
100
|
+
+ componentsProps={{ popper: { onClick: handleClick }}}
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
The `TransitionComponent` prop has been replaced by a `DesktopTransition` component slot on all responsive and desktop pickers:
|
|
105
|
+
|
|
106
|
+
```diff
|
|
107
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
108
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
109
|
+
<DatePicker
|
|
110
|
+
- TransitionComponent={Fade}
|
|
111
|
+
+ components={{ DesktopTransition: Fade }}
|
|
112
|
+
/>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
The `TrapFocusProps` prop has been replaced by a `desktopTrapFocus` component props slot on all responsive and desktop pickers:
|
|
116
|
+
|
|
117
|
+
```diff
|
|
118
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
119
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
120
|
+
<DatePicker
|
|
121
|
+
- TrapFocusProps={{ isEnabled: () => false }}
|
|
122
|
+
+ componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
- The view components allowing to pick a date or parts of a date without an input have been renamed to better fit their usage:
|
|
127
|
+
|
|
128
|
+
```diff
|
|
129
|
+
-<CalendarPicker {...props} />
|
|
130
|
+
+<DateCalendar {...props} />
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
```diff
|
|
134
|
+
-<DayPicker {...props} />
|
|
135
|
+
+<DayCalendar {...props} />
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
```diff
|
|
139
|
+
-<CalendarPickerSkeleton {...props} />
|
|
140
|
+
+<DayCalendarSkeleton {...props} />
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
```diff
|
|
144
|
+
-<MonthPicker {...props} />
|
|
145
|
+
+<MonthCalendar {...props} />
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
```diff
|
|
149
|
+
-<YearPicker {...props} />
|
|
150
|
+
+<YearCalendar {...props} />
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
- Component names in the theme have changed as well:
|
|
154
|
+
|
|
155
|
+
```diff
|
|
156
|
+
-MuiCalendarPicker: {
|
|
157
|
+
+MuiDateCalendar: {
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
```diff
|
|
161
|
+
-MuiDayPicker: {
|
|
162
|
+
+MuiDayCalendar: {
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
```diff
|
|
166
|
+
-MuiCalendarPickerSkeleton: {
|
|
167
|
+
+MuiDayCalendarSkeleton: {
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
```diff
|
|
171
|
+
-MuiMonthPicker: {
|
|
172
|
+
+MuiMonthCalendar: {
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```diff
|
|
176
|
+
-MuiYearPicker: {
|
|
177
|
+
+MuiYearCalendar: {
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
#### Changes
|
|
181
|
+
|
|
182
|
+
- [DatePicker] Allows to fix the number of week displayed (#6299) @alexfauquette
|
|
183
|
+
- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (#6448) @alexfauquette
|
|
184
|
+
- [fields] New components: `MultiInputDateTimeRangePicker` and `MultiInputTimeRangePicker` (#6392) @alexfauquette
|
|
185
|
+
- [fields] Prepare the field exports for the public release (#6467) @flaviendelangle
|
|
186
|
+
- [fields] Support paste in single section (#6422) @alexfauquette
|
|
187
|
+
- [pickers] Add field placeholders to the locale (#6337) @flaviendelangle
|
|
188
|
+
- [pickers] Do not use `Partial` for `components` and `componentsProps` props (#6463) @flaviendelangle
|
|
189
|
+
- [pickers] New component: `DateRangeCalendar` (#6416) @flaviendelangle
|
|
190
|
+
- [pickers] Replace the `Picker` prefix in the view component by `Calendar` (eg: `MonthPicker` => `MonthCalendar`) (#6389) @flaviendelangle
|
|
191
|
+
- [pickers] Support pasting on fields (#6364) @flaviendelangle
|
|
192
|
+
- [pickers] Use slots in the mobile and desktop wrappers instead of `XXXComponent` and `XXXProps` (#6381) @flaviendelangle
|
|
193
|
+
|
|
194
|
+
### Docs
|
|
195
|
+
|
|
196
|
+
- [docs] Add migration to DataGrid v6 page (#6235) @m4theushw
|
|
197
|
+
- [docs] Create first publishable version of the field doc (#6323) @flaviendelangle
|
|
198
|
+
- [docs] Fix trailing spaces in the readme @oliviertassinari
|
|
199
|
+
- [docs] New page for the pickers: Validation (#6064) @flaviendelangle
|
|
200
|
+
- [docs] Organize migration pages (#6480) @flaviendelangle
|
|
201
|
+
|
|
202
|
+
### Core
|
|
203
|
+
|
|
204
|
+
- [core] Add CodeQL workflow (#6387) @DanailH
|
|
205
|
+
- [core] Add missing breaking change to the changelog (#6471) @flaviendelangle
|
|
206
|
+
- [core] Fix playground structure (#6466) @LukasTy
|
|
207
|
+
- [core] Fix tests for pasting on fields (#6465) @flaviendelangle
|
|
208
|
+
- [core] Remove absolute link (#6420) @flaviendelangle
|
|
209
|
+
- [core] Remove unused `react-text-mask` package (#6408) @LukasTy
|
|
210
|
+
- [core] Send explicit warning when dayjs locale is not found (#6424) @alexfauquette
|
|
211
|
+
- [core] Test validation on textfield and date views (#6265) @alexfauquette
|
|
212
|
+
- [test] Sync comment with monorepo @oliviertassinari
|
|
213
|
+
|
|
214
|
+
## v6.0.0-alpha.2
|
|
215
|
+
|
|
216
|
+
_Oct 7, 2022_
|
|
217
|
+
|
|
218
|
+
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
|
|
219
|
+
|
|
220
|
+
- 🚀 Further progress on stabilizing new date field components
|
|
221
|
+
- 🎁 Improve support for theme augmentation in the DataGrid (#6269) @cherniavskii
|
|
222
|
+
- 🌍 Add Japanese (ja-JP) locale to pickers (#6365) @sho918
|
|
223
|
+
- 📚 Documentation improvements
|
|
224
|
+
- 🐞 Bugfixes
|
|
225
|
+
|
|
226
|
+
### `@mui/x-data-grid@v6.0.0-alpha.2` / `@mui/x-data-grid-pro@v6.0.0-alpha.2` / `@mui/x-data-grid-premium@v6.0.0-alpha.2`
|
|
227
|
+
|
|
228
|
+
#### Breaking changes
|
|
229
|
+
|
|
230
|
+
- 🎁 The aggregation is no longer experimental.
|
|
231
|
+
|
|
232
|
+
You can now use the aggregation without the `experimentalFeatures.aggregation` flag enabled.
|
|
233
|
+
|
|
234
|
+
```diff
|
|
235
|
+
<DataGridPremium
|
|
236
|
+
- experimentalFeatures={{ aggregation: true }}
|
|
237
|
+
/>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
The aggregation of the columns through the column menu is now enabled by default on `DataGridPremium`. You can set `disableAggregation={true}` to disable it.
|
|
241
|
+
|
|
242
|
+
#### Changes
|
|
243
|
+
|
|
244
|
+
- [DataGrid] Add filter item ID to `.MuiDataGrid-filterForm` (#6313) @m4theushw
|
|
245
|
+
- [DataGrid] Add missing `valueOptions` (#6401) @DanailH
|
|
246
|
+
- [DataGrid] Don't start edit mode when pressing Shift + Space (#6228) @m4theushw
|
|
247
|
+
- [DataGrid] Fix error when using column grouping with all columns hidden (#6405) @alexfauquette
|
|
248
|
+
- [DataGrid] Pass generics to the components in the theme augmentation (#6269) @cherniavskii
|
|
249
|
+
- [DataGridPremium] Remove the aggregation from the experimental features (#6372) @flaviendelangle
|
|
250
|
+
|
|
251
|
+
### `@mui/x-date-pickers@v6.0.0-alpha.2` / `@mui/x-date-pickers-pro@v6.0.0-alpha.2`
|
|
252
|
+
|
|
253
|
+
#### Breaking changes
|
|
254
|
+
|
|
255
|
+
- The `renderDay` prop has been replaced by a `Day` component slot.
|
|
256
|
+
You can find more information about this pattern in the [MUI Base documentation](https://mui.com/base/getting-started/usage/#shared-props).
|
|
257
|
+
|
|
258
|
+
```diff
|
|
259
|
+
// Same for any other date, date time or date range picker.
|
|
260
|
+
<DatePicker
|
|
261
|
+
- renderDay={(_, dayProps) => <CustomDay {...dayProps} />}
|
|
262
|
+
+ components={{ Day: CustomDay }}
|
|
263
|
+
/>
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
#### Changes
|
|
267
|
+
|
|
268
|
+
- [DateRangePicker] Fix the shape of the first selected day when the start date has an hour set (#6403) @flaviendelangle
|
|
269
|
+
- [l10n] Add Japanese (ja-JP) locale to pickers (#6365) @sho918
|
|
270
|
+
- [DateRangePicker] Force focus to stay on inputs (#6324) @alexfauquette
|
|
271
|
+
- [pickers] Improve edition on field components (#6339) @flaviendelangle
|
|
272
|
+
- [pickers] Improve field selection behaviors (#6317) @flaviendelangle
|
|
273
|
+
- [pickers] Replace the `renderDay` prop with a `Day` component slot (#6293) @flaviendelangle
|
|
274
|
+
|
|
275
|
+
### Docs
|
|
276
|
+
|
|
277
|
+
- [docs] Apply style guide to Data Grid Aggregation page (#5781) @samuelsycamore
|
|
278
|
+
- [docs] Fix code examples of editing cells (#6004) @TiagoPortfolio
|
|
279
|
+
- [docs] Fix customized day rendering demo style (#6342) (#6399) @Ambrish-git
|
|
280
|
+
- [docs] Implement Style Guide on "Advanced" Data Grid doc pages (#6331) @samuelsycamore
|
|
281
|
+
- [docs] Use components instead of demos for `SelectorsDocs` (#6103) @flaviendelangle
|
|
282
|
+
- [license] Add new license status 'Out of scope' (#5260) @flaviendelangle
|
|
283
|
+
|
|
284
|
+
### Core
|
|
285
|
+
|
|
286
|
+
- [core] Speedup of yarn install in the CI (#6395) @oliviertassinari
|
|
287
|
+
- [test] Remove redundant test clean-ups (#6377) @oliviertassinari
|
|
288
|
+
- [test] Replace `React.render` with `React.createRoot` in e2e tests (#6393) @m4theushw
|
|
289
|
+
|
|
6
290
|
## 6.0.0-alpha.1
|
|
7
291
|
|
|
8
292
|
_Sep 29, 2022_
|
|
@@ -38,7 +322,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
|
|
|
38
322
|
Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
|
|
39
323
|
|
|
40
324
|
```diff
|
|
41
|
-
<DataGridPremium
|
|
325
|
+
<DataGridPremium
|
|
42
326
|
groupingColDef={() => ({
|
|
43
327
|
valueFormatter: (params) => {
|
|
44
328
|
if (params.id == null) {
|
|
@@ -79,9 +363,8 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
|
|
|
79
363
|
|
|
80
364
|
#### Breaking changes
|
|
81
365
|
|
|
82
|
-
-
|
|
366
|
+
- The `value` prop of the pickers now expects a parsed value.
|
|
83
367
|
|
|
84
|
-
The `value` prop of the pickers now expects a parsed value.
|
|
85
368
|
Until now, it was possible to provide any format that your date management library was able to parse.
|
|
86
369
|
For instance, you could pass `value={new Date()}` when using `AdapterDayjs`.
|
|
87
370
|
|
|
@@ -220,12 +503,24 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
|
|
|
220
503
|
|
|
221
504
|
You can find more information about the new api, including how to set those translations on all your components at once in the [documentation](https://next.mui.com/x/react-date-pickers/localization/)
|
|
222
505
|
|
|
506
|
+
- The deprecated `locale` prop of the `LocalizationProvider` component have been renamed `adapterLocale`:
|
|
507
|
+
|
|
508
|
+
```diff
|
|
509
|
+
<LocalizationProvider
|
|
510
|
+
dateAdapter={AdapterDayjs}
|
|
511
|
+
- locale="fr"
|
|
512
|
+
+ adapterLocale="fr"
|
|
513
|
+
>
|
|
514
|
+
{children}
|
|
515
|
+
</LocalizationProvider>
|
|
516
|
+
```
|
|
517
|
+
|
|
223
518
|
- The component slots `LeftArrowButton` and `RightArrowButton` have been renamed `PreviousIconButton` and `NextIconButton` to better describe there usage:
|
|
224
519
|
|
|
225
520
|
```diff
|
|
226
|
-
<DatePicker
|
|
521
|
+
<DatePicker
|
|
227
522
|
components={{
|
|
228
|
-
- LeftArrowButton: CustomButton,
|
|
523
|
+
- LeftArrowButton: CustomButton,
|
|
229
524
|
+ PreviousIconButton: CustomButton,
|
|
230
525
|
|
|
231
526
|
- RightArrowButton: CustomButton,
|
|
@@ -233,7 +528,7 @@ You can find more information about the new api, including how to set those tran
|
|
|
233
528
|
}}
|
|
234
529
|
|
|
235
530
|
componentsProps={{
|
|
236
|
-
- leftArrowButton: {},
|
|
531
|
+
- leftArrowButton: {},
|
|
237
532
|
+ previousIconButton: {},
|
|
238
533
|
|
|
239
534
|
- rightArrowButton: {},
|
|
@@ -2420,8 +2715,8 @@ _Nov 23, 2021_
|
|
|
2420
2715
|
|
|
2421
2716
|
🎉 We are excited to introduce [MUI X v5.0.0](https://mui.com/blog/mui-x-v5/) 🎉!
|
|
2422
2717
|
|
|
2423
|
-
If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the [migration guide](https://mui.com/x/
|
|
2424
|
-
This version is fully compatible with `@mui/material@5.X` and can be used with `@material-ui/core@4.x` with some [additional steps](https://mui.com/x/
|
|
2718
|
+
If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the [migration guide](https://mui.com/x/migration/migration-data-grid-v4/).
|
|
2719
|
+
This version is fully compatible with `@mui/material@5.X` and can be used with `@material-ui/core@4.x` with some [additional steps](https://mui.com/x/migration/migration-data-grid-v4/#using-mui-x-v5-with-mui-core-v4).
|
|
2425
2720
|
|
|
2426
2721
|
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
|
|
2427
2722
|
|
package/index.js
CHANGED
package/legacy/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
1
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
5
|
import * as React from 'react';
|
|
4
6
|
import { useGridApiContext } from '@mui/x-data-grid-premium';
|
|
5
7
|
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
|
|
@@ -28,21 +30,37 @@ function EditCountry(props) {
|
|
|
28
30
|
value = props.value,
|
|
29
31
|
field = props.field;
|
|
30
32
|
var apiRef = useGridApiContext();
|
|
31
|
-
var handleChange = React.useCallback(function (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
var handleChange = React.useCallback( /*#__PURE__*/function () {
|
|
34
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
|
|
35
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
36
|
+
while (1) {
|
|
37
|
+
switch (_context.prev = _context.next) {
|
|
38
|
+
case 0:
|
|
39
|
+
_context.next = 2;
|
|
40
|
+
return apiRef.current.setEditCellValue({
|
|
41
|
+
id: id,
|
|
42
|
+
field: field,
|
|
43
|
+
value: newValue
|
|
44
|
+
}, event);
|
|
37
45
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
case 2:
|
|
47
|
+
apiRef.current.stopCellEditMode({
|
|
48
|
+
id: id,
|
|
49
|
+
field: field
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
case 3:
|
|
53
|
+
case "end":
|
|
54
|
+
return _context.stop();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}, _callee);
|
|
58
|
+
}));
|
|
59
|
+
|
|
60
|
+
return function (_x, _x2) {
|
|
61
|
+
return _ref3.apply(this, arguments);
|
|
62
|
+
};
|
|
63
|
+
}(), [apiRef, field, id]);
|
|
46
64
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
47
65
|
value: value,
|
|
48
66
|
onChange: handleChange,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
1
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
5
|
import * as React from 'react';
|
|
4
6
|
import { useGridApiContext } from '@mui/x-data-grid-premium';
|
|
5
7
|
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
|
|
@@ -28,21 +30,37 @@ function EditCurrency(props) {
|
|
|
28
30
|
value = props.value,
|
|
29
31
|
field = props.field;
|
|
30
32
|
var apiRef = useGridApiContext();
|
|
31
|
-
var handleChange = React.useCallback(function (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
var handleChange = React.useCallback( /*#__PURE__*/function () {
|
|
34
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
|
|
35
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
36
|
+
while (1) {
|
|
37
|
+
switch (_context.prev = _context.next) {
|
|
38
|
+
case 0:
|
|
39
|
+
_context.next = 2;
|
|
40
|
+
return apiRef.current.setEditCellValue({
|
|
41
|
+
id: id,
|
|
42
|
+
field: field,
|
|
43
|
+
value: newValue.toUpperCase()
|
|
44
|
+
}, event);
|
|
37
45
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
case 2:
|
|
47
|
+
apiRef.current.stopCellEditMode({
|
|
48
|
+
id: id,
|
|
49
|
+
field: field
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
case 3:
|
|
53
|
+
case "end":
|
|
54
|
+
return _context.stop();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}, _callee);
|
|
58
|
+
}));
|
|
59
|
+
|
|
60
|
+
return function (_x, _x2) {
|
|
61
|
+
return _ref3.apply(this, arguments);
|
|
62
|
+
};
|
|
63
|
+
}(), [apiRef, field, id]);
|
|
46
64
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
47
65
|
value: value,
|
|
48
66
|
onChange: handleChange,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
3
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
4
|
import * as React from 'react';
|
|
3
5
|
import { useGridApiContext } from '@mui/x-data-grid-premium';
|
|
4
6
|
import Select from '@mui/material/Select';
|
|
@@ -15,28 +17,44 @@ function EditIncoterm(props) {
|
|
|
15
17
|
field = props.field;
|
|
16
18
|
var apiRef = useGridApiContext();
|
|
17
19
|
|
|
18
|
-
var handleChange = function
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
var handleChange = /*#__PURE__*/function () {
|
|
21
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
|
|
22
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
23
|
+
while (1) {
|
|
24
|
+
switch (_context.prev = _context.next) {
|
|
25
|
+
case 0:
|
|
26
|
+
_context.next = 2;
|
|
27
|
+
return apiRef.current.setEditCellValue({
|
|
28
|
+
id: id,
|
|
29
|
+
field: field,
|
|
30
|
+
value: event.target.value
|
|
31
|
+
}, event);
|
|
29
32
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
case 2:
|
|
34
|
+
apiRef.current.stopCellEditMode({
|
|
35
|
+
id: id,
|
|
36
|
+
field: field
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
case 3:
|
|
40
|
+
case "end":
|
|
41
|
+
return _context.stop();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}, _callee);
|
|
45
|
+
}));
|
|
46
|
+
|
|
47
|
+
return function handleChange(_x) {
|
|
48
|
+
return _ref.apply(this, arguments);
|
|
49
|
+
};
|
|
50
|
+
}();
|
|
36
51
|
|
|
37
52
|
var handleClose = function handleClose(event, reason) {
|
|
38
53
|
if (reason === 'backdropClick') {
|
|
39
|
-
apiRef.current.
|
|
54
|
+
apiRef.current.stopCellEditMode({
|
|
55
|
+
id: id,
|
|
56
|
+
field: field
|
|
57
|
+
});
|
|
40
58
|
}
|
|
41
59
|
};
|
|
42
60
|
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
3
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
4
|
import * as React from 'react';
|
|
3
5
|
import Box from '@mui/material/Box';
|
|
4
6
|
import Rating from '@mui/material/Rating';
|
|
@@ -12,22 +14,37 @@ function EditRating(props) {
|
|
|
12
14
|
field = props.field;
|
|
13
15
|
var apiRef = useGridApiContext();
|
|
14
16
|
|
|
15
|
-
var handleChange = function
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
var handleChange = /*#__PURE__*/function () {
|
|
18
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
|
|
19
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
20
|
+
while (1) {
|
|
21
|
+
switch (_context.prev = _context.next) {
|
|
22
|
+
case 0:
|
|
23
|
+
_context.next = 2;
|
|
24
|
+
return apiRef.current.setEditCellValue({
|
|
25
|
+
id: id,
|
|
26
|
+
field: field,
|
|
27
|
+
value: Number(event.target.value)
|
|
28
|
+
}, event);
|
|
29
|
+
|
|
30
|
+
case 2:
|
|
31
|
+
apiRef.current.stopCellEditMode({
|
|
32
|
+
id: id,
|
|
33
|
+
field: field
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
case 3:
|
|
37
|
+
case "end":
|
|
38
|
+
return _context.stop();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, _callee);
|
|
42
|
+
}));
|
|
43
|
+
|
|
44
|
+
return function handleChange(_x) {
|
|
45
|
+
return _ref.apply(this, arguments);
|
|
46
|
+
};
|
|
47
|
+
}();
|
|
31
48
|
|
|
32
49
|
var handleRef = function handleRef(element) {
|
|
33
50
|
if (element) {
|
package/modern/index.js
CHANGED
|
@@ -29,20 +29,16 @@ function EditCountry(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -29,20 +29,16 @@ function EditCurrency(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue.toUpperCase()
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -17,28 +17,24 @@ function EditIncoterm(props) {
|
|
|
17
17
|
} = props;
|
|
18
18
|
const apiRef = useGridApiContext();
|
|
19
19
|
|
|
20
|
-
const handleChange = event => {
|
|
21
|
-
apiRef.current.setEditCellValue({
|
|
20
|
+
const handleChange = async event => {
|
|
21
|
+
await apiRef.current.setEditCellValue({
|
|
22
22
|
id,
|
|
23
23
|
field,
|
|
24
24
|
value: event.target.value
|
|
25
25
|
}, event);
|
|
26
|
-
apiRef.current.
|
|
26
|
+
apiRef.current.stopCellEditMode({
|
|
27
27
|
id,
|
|
28
28
|
field
|
|
29
29
|
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
|
|
32
|
-
if (event.key) {
|
|
33
|
-
// TODO v6: remove once we stop ignoring events fired from portals
|
|
34
|
-
const params = apiRef.current.getCellParams(id, field);
|
|
35
|
-
apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
|
|
36
|
-
}
|
|
37
30
|
};
|
|
38
31
|
|
|
39
32
|
const handleClose = (event, reason) => {
|
|
40
33
|
if (reason === 'backdropClick') {
|
|
41
|
-
apiRef.current.
|
|
34
|
+
apiRef.current.stopCellEditMode({
|
|
35
|
+
id,
|
|
36
|
+
field
|
|
37
|
+
});
|
|
42
38
|
}
|
|
43
39
|
};
|
|
44
40
|
|
|
@@ -14,21 +14,16 @@ function EditRating(props) {
|
|
|
14
14
|
} = props;
|
|
15
15
|
const apiRef = useGridApiContext();
|
|
16
16
|
|
|
17
|
-
const handleChange = event => {
|
|
18
|
-
apiRef.current.setEditCellValue({
|
|
17
|
+
const handleChange = async event => {
|
|
18
|
+
await apiRef.current.setEditCellValue({
|
|
19
19
|
id,
|
|
20
20
|
field,
|
|
21
21
|
value: Number(event.target.value)
|
|
22
|
-
}, event);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
id,
|
|
28
|
-
field
|
|
29
|
-
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
}
|
|
22
|
+
}, event);
|
|
23
|
+
apiRef.current.stopCellEditMode({
|
|
24
|
+
id,
|
|
25
|
+
field
|
|
26
|
+
});
|
|
32
27
|
};
|
|
33
28
|
|
|
34
29
|
const handleRef = element => {
|
package/node/index.js
CHANGED
|
@@ -50,20 +50,16 @@ function EditCountry(props) {
|
|
|
50
50
|
field
|
|
51
51
|
} = props;
|
|
52
52
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
53
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
54
|
-
apiRef.current.setEditCellValue({
|
|
53
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
54
|
+
await apiRef.current.setEditCellValue({
|
|
55
55
|
id,
|
|
56
56
|
field,
|
|
57
57
|
value: newValue
|
|
58
58
|
}, event);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
field
|
|
64
|
-
});
|
|
65
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
66
|
-
}
|
|
59
|
+
apiRef.current.stopCellEditMode({
|
|
60
|
+
id,
|
|
61
|
+
field
|
|
62
|
+
});
|
|
67
63
|
}, [apiRef, field, id]);
|
|
68
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
|
|
69
65
|
value: value,
|
|
@@ -50,20 +50,16 @@ function EditCurrency(props) {
|
|
|
50
50
|
field
|
|
51
51
|
} = props;
|
|
52
52
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
53
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
54
|
-
apiRef.current.setEditCellValue({
|
|
53
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
54
|
+
await apiRef.current.setEditCellValue({
|
|
55
55
|
id,
|
|
56
56
|
field,
|
|
57
57
|
value: newValue.toUpperCase()
|
|
58
58
|
}, event);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
field
|
|
64
|
-
});
|
|
65
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
66
|
-
}
|
|
59
|
+
apiRef.current.stopCellEditMode({
|
|
60
|
+
id,
|
|
61
|
+
field
|
|
62
|
+
});
|
|
67
63
|
}, [apiRef, field, id]);
|
|
68
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
|
|
69
65
|
value: value,
|
|
@@ -37,28 +37,24 @@ function EditIncoterm(props) {
|
|
|
37
37
|
} = props;
|
|
38
38
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
39
39
|
|
|
40
|
-
const handleChange = event => {
|
|
41
|
-
apiRef.current.setEditCellValue({
|
|
40
|
+
const handleChange = async event => {
|
|
41
|
+
await apiRef.current.setEditCellValue({
|
|
42
42
|
id,
|
|
43
43
|
field,
|
|
44
44
|
value: event.target.value
|
|
45
45
|
}, event);
|
|
46
|
-
apiRef.current.
|
|
46
|
+
apiRef.current.stopCellEditMode({
|
|
47
47
|
id,
|
|
48
48
|
field
|
|
49
49
|
});
|
|
50
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
51
|
-
|
|
52
|
-
if (event.key) {
|
|
53
|
-
// TODO v6: remove once we stop ignoring events fired from portals
|
|
54
|
-
const params = apiRef.current.getCellParams(id, field);
|
|
55
|
-
apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
|
|
56
|
-
}
|
|
57
50
|
};
|
|
58
51
|
|
|
59
52
|
const handleClose = (event, reason) => {
|
|
60
53
|
if (reason === 'backdropClick') {
|
|
61
|
-
apiRef.current.
|
|
54
|
+
apiRef.current.stopCellEditMode({
|
|
55
|
+
id,
|
|
56
|
+
field
|
|
57
|
+
});
|
|
62
58
|
}
|
|
63
59
|
};
|
|
64
60
|
|
|
@@ -31,21 +31,16 @@ function EditRating(props) {
|
|
|
31
31
|
} = props;
|
|
32
32
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
33
33
|
|
|
34
|
-
const handleChange = event => {
|
|
35
|
-
apiRef.current.setEditCellValue({
|
|
34
|
+
const handleChange = async event => {
|
|
35
|
+
await apiRef.current.setEditCellValue({
|
|
36
36
|
id,
|
|
37
37
|
field,
|
|
38
38
|
value: Number(event.target.value)
|
|
39
|
-
}, event);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
id,
|
|
45
|
-
field
|
|
46
|
-
});
|
|
47
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
48
|
-
}
|
|
39
|
+
}, event);
|
|
40
|
+
apiRef.current.stopCellEditMode({
|
|
41
|
+
id,
|
|
42
|
+
field
|
|
43
|
+
});
|
|
49
44
|
};
|
|
50
45
|
|
|
51
46
|
const handleRef = element => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid-generator",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.3",
|
|
4
4
|
"description": "Generate fake data for demo purposes only.",
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"main": "./node/index.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.19.0",
|
|
23
|
-
"@mui/base": "^5.0.0-alpha.
|
|
24
|
-
"@mui/x-data-grid-premium": "6.0.0-alpha.
|
|
23
|
+
"@mui/base": "^5.0.0-alpha.101",
|
|
24
|
+
"@mui/x-data-grid-premium": "6.0.0-alpha.3",
|
|
25
25
|
"chance": "^1.1.8",
|
|
26
26
|
"clsx": "^1.2.1",
|
|
27
27
|
"lru-cache": "^7.14.0"
|
|
@@ -29,20 +29,16 @@ function EditCountry(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -29,20 +29,16 @@ function EditCurrency(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue.toUpperCase()
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -17,28 +17,24 @@ function EditIncoterm(props) {
|
|
|
17
17
|
} = props;
|
|
18
18
|
const apiRef = useGridApiContext();
|
|
19
19
|
|
|
20
|
-
const handleChange = event => {
|
|
21
|
-
apiRef.current.setEditCellValue({
|
|
20
|
+
const handleChange = async event => {
|
|
21
|
+
await apiRef.current.setEditCellValue({
|
|
22
22
|
id,
|
|
23
23
|
field,
|
|
24
24
|
value: event.target.value
|
|
25
25
|
}, event);
|
|
26
|
-
apiRef.current.
|
|
26
|
+
apiRef.current.stopCellEditMode({
|
|
27
27
|
id,
|
|
28
28
|
field
|
|
29
29
|
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
|
|
32
|
-
if (event.key) {
|
|
33
|
-
// TODO v6: remove once we stop ignoring events fired from portals
|
|
34
|
-
const params = apiRef.current.getCellParams(id, field);
|
|
35
|
-
apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
|
|
36
|
-
}
|
|
37
30
|
};
|
|
38
31
|
|
|
39
32
|
const handleClose = (event, reason) => {
|
|
40
33
|
if (reason === 'backdropClick') {
|
|
41
|
-
apiRef.current.
|
|
34
|
+
apiRef.current.stopCellEditMode({
|
|
35
|
+
id,
|
|
36
|
+
field
|
|
37
|
+
});
|
|
42
38
|
}
|
|
43
39
|
};
|
|
44
40
|
|
|
@@ -14,21 +14,16 @@ function EditRating(props) {
|
|
|
14
14
|
} = props;
|
|
15
15
|
const apiRef = useGridApiContext();
|
|
16
16
|
|
|
17
|
-
const handleChange = event => {
|
|
18
|
-
apiRef.current.setEditCellValue({
|
|
17
|
+
const handleChange = async event => {
|
|
18
|
+
await apiRef.current.setEditCellValue({
|
|
19
19
|
id,
|
|
20
20
|
field,
|
|
21
21
|
value: Number(event.target.value)
|
|
22
|
-
}, event);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
id,
|
|
28
|
-
field
|
|
29
|
-
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
}
|
|
22
|
+
}, event);
|
|
23
|
+
apiRef.current.stopCellEditMode({
|
|
24
|
+
id,
|
|
25
|
+
field
|
|
26
|
+
});
|
|
32
27
|
};
|
|
33
28
|
|
|
34
29
|
const handleRef = element => {
|