@mui/x-data-grid 7.0.0-beta.1 → 7.0.0-beta.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 (125) hide show
  1. package/CHANGELOG.md +223 -1
  2. package/DataGrid/DataGrid.d.ts +1 -1
  3. package/DataGrid/DataGrid.js +1 -7
  4. package/DataGrid/useDataGridProps.js +3 -1
  5. package/components/GridPagination.d.ts +1 -1
  6. package/components/GridPagination.js +12 -2
  7. package/components/GridRow.d.ts +3 -1
  8. package/components/GridRow.js +16 -6
  9. package/components/GridScrollbarFillerCell.js +0 -3
  10. package/components/base/GridFooterPlaceholder.js +1 -1
  11. package/components/cell/GridActionsCell.js +3 -3
  12. package/components/cell/GridActionsCellItem.d.ts +13 -1
  13. package/components/cell/GridActionsCellItem.js +27 -15
  14. package/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
  15. package/components/columnSelection/GridHeaderCheckbox.d.ts +1 -1
  16. package/components/columnsManagement/utils.d.ts +1 -1
  17. package/components/containers/GridRootStyles.js +9 -4
  18. package/components/panel/GridPanel.d.ts +1 -1
  19. package/components/panel/filterPanel/GridFilterInputBoolean.js +7 -5
  20. package/components/panel/filterPanel/GridFilterInputSingleSelect.js +7 -5
  21. package/components/panel/filterPanel/GridFilterInputValue.js +4 -3
  22. package/components/panel/filterPanel/GridFilterPanel.js +1 -1
  23. package/components/virtualization/GridVirtualScrollerRenderZone.js +10 -3
  24. package/constants/gridClasses.d.ts +5 -0
  25. package/constants/gridClasses.js +1 -1
  26. package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts +5 -5
  27. package/hooks/features/columnHeaders/useGridColumnHeaders.js +46 -48
  28. package/hooks/features/rows/gridRowsUtils.js +1 -1
  29. package/hooks/features/rows/useGridRows.js +2 -2
  30. package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts +9 -0
  31. package/hooks/features/virtualization/gridVirtualizationSelectors.js +7 -0
  32. package/hooks/features/virtualization/useGridVirtualScroller.d.ts +0 -1
  33. package/hooks/features/virtualization/useGridVirtualScroller.js +28 -26
  34. package/hooks/features/virtualization/useGridVirtualization.d.ts +8 -0
  35. package/hooks/features/virtualization/useGridVirtualization.js +6 -1
  36. package/index.js +1 -1
  37. package/internals/utils/propValidation.js +1 -1
  38. package/joy/joySlots.js +2 -2
  39. package/legacy/DataGrid/DataGrid.js +1 -7
  40. package/legacy/DataGrid/useDataGridProps.js +3 -1
  41. package/legacy/components/GridPagination.js +10 -2
  42. package/legacy/components/GridRow.js +16 -6
  43. package/legacy/components/GridScrollbarFillerCell.js +1 -3
  44. package/legacy/components/base/GridFooterPlaceholder.js +1 -1
  45. package/legacy/components/cell/GridActionsCell.js +3 -3
  46. package/legacy/components/cell/GridActionsCellItem.js +30 -17
  47. package/legacy/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
  48. package/legacy/components/containers/GridRootStyles.js +8 -5
  49. package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js +7 -4
  50. package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js +8 -5
  51. package/legacy/components/panel/filterPanel/GridFilterInputValue.js +4 -2
  52. package/legacy/components/panel/filterPanel/GridFilterPanel.js +1 -1
  53. package/legacy/components/virtualization/GridVirtualScrollerRenderZone.js +10 -3
  54. package/legacy/constants/gridClasses.js +1 -1
  55. package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js +60 -63
  56. package/legacy/hooks/features/rows/gridRowsUtils.js +1 -1
  57. package/legacy/hooks/features/rows/useGridRows.js +2 -2
  58. package/legacy/hooks/features/virtualization/gridVirtualizationSelectors.js +9 -0
  59. package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +28 -26
  60. package/legacy/hooks/features/virtualization/useGridVirtualization.js +6 -1
  61. package/legacy/index.js +1 -1
  62. package/legacy/internals/utils/propValidation.js +1 -1
  63. package/legacy/joy/joySlots.js +2 -2
  64. package/legacy/locales/daDK.js +12 -12
  65. package/locales/daDK.js +12 -12
  66. package/models/api/gridApiCommon.d.ts +1 -1
  67. package/models/api/gridFilterApi.d.ts +1 -1
  68. package/models/api/gridLocaleTextApi.d.ts +3 -3
  69. package/models/events/gridEventLookup.d.ts +2 -9
  70. package/models/gridSlotsComponent.d.ts +34 -36
  71. package/models/gridSlotsComponentsProps.d.ts +73 -54
  72. package/models/props/DataGridProps.d.ts +2 -8
  73. package/modern/DataGrid/DataGrid.js +1 -7
  74. package/modern/DataGrid/useDataGridProps.js +3 -1
  75. package/modern/components/GridPagination.js +12 -2
  76. package/modern/components/GridRow.js +15 -6
  77. package/modern/components/GridScrollbarFillerCell.js +0 -3
  78. package/modern/components/base/GridFooterPlaceholder.js +1 -1
  79. package/modern/components/cell/GridActionsCell.js +3 -3
  80. package/modern/components/cell/GridActionsCellItem.js +27 -15
  81. package/modern/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
  82. package/modern/components/containers/GridRootStyles.js +9 -4
  83. package/modern/components/panel/filterPanel/GridFilterInputBoolean.js +7 -5
  84. package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js +7 -5
  85. package/modern/components/panel/filterPanel/GridFilterInputValue.js +4 -3
  86. package/modern/components/panel/filterPanel/GridFilterPanel.js +1 -1
  87. package/modern/components/virtualization/GridVirtualScrollerRenderZone.js +10 -3
  88. package/modern/constants/gridClasses.js +1 -1
  89. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +46 -48
  90. package/modern/hooks/features/rows/gridRowsUtils.js +1 -1
  91. package/modern/hooks/features/rows/useGridRows.js +2 -2
  92. package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js +7 -0
  93. package/modern/hooks/features/virtualization/useGridVirtualScroller.js +27 -24
  94. package/modern/hooks/features/virtualization/useGridVirtualization.js +6 -1
  95. package/modern/index.js +1 -1
  96. package/modern/internals/utils/propValidation.js +1 -1
  97. package/modern/joy/joySlots.js +2 -2
  98. package/modern/locales/daDK.js +12 -12
  99. package/node/DataGrid/DataGrid.js +1 -7
  100. package/node/DataGrid/useDataGridProps.js +3 -1
  101. package/node/components/GridPagination.js +12 -2
  102. package/node/components/GridRow.js +15 -6
  103. package/node/components/GridScrollbarFillerCell.js +0 -3
  104. package/node/components/base/GridFooterPlaceholder.js +1 -1
  105. package/node/components/cell/GridActionsCell.js +3 -3
  106. package/node/components/cell/GridActionsCellItem.js +27 -15
  107. package/node/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
  108. package/node/components/containers/GridRootStyles.js +9 -4
  109. package/node/components/panel/filterPanel/GridFilterInputBoolean.js +7 -5
  110. package/node/components/panel/filterPanel/GridFilterInputSingleSelect.js +7 -5
  111. package/node/components/panel/filterPanel/GridFilterInputValue.js +4 -3
  112. package/node/components/panel/filterPanel/GridFilterPanel.js +1 -1
  113. package/node/components/virtualization/GridVirtualScrollerRenderZone.js +10 -3
  114. package/node/constants/gridClasses.js +1 -1
  115. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +45 -47
  116. package/node/hooks/features/rows/gridRowsUtils.js +2 -2
  117. package/node/hooks/features/rows/useGridRows.js +2 -2
  118. package/node/hooks/features/virtualization/gridVirtualizationSelectors.js +8 -1
  119. package/node/hooks/features/virtualization/useGridVirtualScroller.js +26 -23
  120. package/node/hooks/features/virtualization/useGridVirtualization.js +7 -2
  121. package/node/index.js +1 -1
  122. package/node/internals/utils/propValidation.js +1 -1
  123. package/node/joy/joySlots.js +2 -2
  124. package/node/locales/daDK.js +12 -12
  125. package/package.json +4 -4
package/locales/daDK.js CHANGED
@@ -11,8 +11,8 @@ const daDKGrid = {
11
11
  toolbarDensityStandard: 'Standard',
12
12
  toolbarDensityComfortable: 'Luftig',
13
13
  // Columns selector toolbar button text
14
- toolbarColumns: 'Kolonne',
15
- toolbarColumnsLabel: 'Vælg kolonne',
14
+ toolbarColumns: 'Kolonner',
15
+ toolbarColumnsLabel: 'Vælg kolonner',
16
16
  // Filters toolbar button text
17
17
  toolbarFilters: 'Filtre',
18
18
  toolbarFiltersLabel: 'Vis filtre',
@@ -39,12 +39,12 @@ const daDKGrid = {
39
39
  filterPanelRemoveAll: 'Fjern alle',
40
40
  filterPanelDeleteIconLabel: 'Slet',
41
41
  filterPanelLogicOperator: 'Logisk operator',
42
- filterPanelOperator: 'Operatorer',
42
+ filterPanelOperator: 'Operator',
43
43
  filterPanelOperatorAnd: 'Og',
44
44
  filterPanelOperatorOr: 'Eller',
45
- filterPanelColumns: 'Kolonne',
45
+ filterPanelColumns: 'Kolonner',
46
46
  filterPanelInputLabel: 'Værdi',
47
- filterPanelInputPlaceholder: 'Filter værdi',
47
+ filterPanelInputPlaceholder: 'Filterværdi',
48
48
  // Filter operators text
49
49
  filterOperatorContains: 'indeholder',
50
50
  filterOperatorEquals: 'lig med',
@@ -91,10 +91,10 @@ const daDKGrid = {
91
91
  filterValueFalse: 'negativ',
92
92
  // Column menu text
93
93
  columnMenuLabel: 'Menu',
94
- columnMenuShowColumns: 'Vis Kolonner',
94
+ columnMenuShowColumns: 'Vis kolonner',
95
95
  columnMenuManageColumns: 'Administrer kolonner',
96
- columnMenuFilter: 'Filtre',
97
- columnMenuHideColumn: 'Skjul',
96
+ columnMenuFilter: 'Filtrer',
97
+ columnMenuHideColumn: 'Skjul kolonne',
98
98
  columnMenuUnsort: 'Fjern sortering',
99
99
  columnMenuSortAsc: 'Sorter stigende',
100
100
  columnMenuSortDesc: 'Sorter faldende',
@@ -124,13 +124,13 @@ const daDKGrid = {
124
124
  pinToRight: 'Fastgør til højre',
125
125
  unpin: 'Frigiv',
126
126
  // Tree Data
127
- treeDataGroupingHeaderName: 'Gruppering',
127
+ treeDataGroupingHeaderName: 'Gruppe',
128
128
  treeDataExpand: 'Vis underelementer',
129
129
  treeDataCollapse: 'Skjul underelementer',
130
130
  // Grouping columns
131
- groupingColumnHeaderName: 'Gruppér',
131
+ groupingColumnHeaderName: 'Gruppe',
132
132
  groupColumn: name => `Gruppér efter ${name}`,
133
- unGroupColumn: name => `Fjern gruppéring efter ${name}`,
133
+ unGroupColumn: name => `Fjern gruppering efter ${name}`,
134
134
  // Master/detail
135
135
  detailPanelToggle: 'Udvid/kollaps detaljepanel',
136
136
  expandDetailPanel: 'Udvid',
@@ -138,7 +138,7 @@ const daDKGrid = {
138
138
  // Row reordering text
139
139
  rowReorderingHeaderName: 'Omarrangering af rækker',
140
140
  // Aggregation
141
- aggregationMenuItemHeader: 'Aggregation',
141
+ aggregationMenuItemHeader: 'Aggregering',
142
142
  aggregationFunctionLabelSum: 'sum',
143
143
  aggregationFunctionLabelAvg: 'gns',
144
144
  aggregationFunctionLabelMin: 'min',
@@ -4,7 +4,7 @@ import { GridCoreApi, GridCorePrivateApi } from './gridCoreApi';
4
4
  import { GridCsvExportApi } from './gridCsvExportApi';
5
5
  import { GridDensityApi } from './gridDensityApi';
6
6
  import { GridEditingApi, GridEditingPrivateApi } from './gridEditingApi';
7
- import { GridFilterApi } from './gridFilterApi';
7
+ import type { GridFilterApi } from './gridFilterApi';
8
8
  import { GridFocusApi, GridFocusPrivateApi } from './gridFocusApi';
9
9
  import { GridLocaleTextApi } from './gridLocaleTextApi';
10
10
  import type { GridParamsApi } from './gridParamsApi';
@@ -1,7 +1,7 @@
1
1
  import { GridFilterModel } from '../gridFilterModel';
2
2
  import { GridFilterItem, GridLogicOperator } from '../gridFilterItem';
3
3
  import { GridControlledStateReasonLookup } from '../events';
4
- import { DataGridProcessedProps } from '../props/DataGridProps';
4
+ import type { DataGridProcessedProps } from '../props/DataGridProps';
5
5
  /**
6
6
  * The filter API interface that is available in the grid [[apiRef]].
7
7
  */
@@ -27,9 +27,9 @@ export interface GridLocaleText {
27
27
  toolbarExportCSV: React.ReactNode;
28
28
  toolbarExportPrint: React.ReactNode;
29
29
  toolbarExportExcel: string;
30
- columnsManagementSearchTitle: React.ReactNode;
31
- columnsManagementNoColumns: React.ReactNode;
32
- columnsManagementShowHideAllText: React.ReactNode;
30
+ columnsManagementSearchTitle: string;
31
+ columnsManagementNoColumns: string;
32
+ columnsManagementShowHideAllText: string;
33
33
  filterPanelAddFilter: React.ReactNode;
34
34
  filterPanelRemoveAll: React.ReactNode;
35
35
  filterPanelDeleteIconLabel: string;
@@ -7,7 +7,7 @@ import type { GridSortModel } from '../gridSortModel';
7
7
  import type { GridRowSelectionModel } from '../gridRowSelectionModel';
8
8
  import type { ElementSize } from '../elementSize';
9
9
  import type { MuiBaseEvent } from '../muiEvent';
10
- import type { GridGroupNode, GridRowId } from '../gridRows';
10
+ import type { GridGroupNode } from '../gridRows';
11
11
  import type { GridColumnVisibilityModel } from '../../hooks/features/columns';
12
12
  import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcessing';
13
13
  import { GridRowEditStartParams, GridRowEditStopParams } from '../params/gridRowParams';
@@ -371,7 +371,7 @@ export interface GridControlledStateEventLookup {
371
371
  };
372
372
  }
373
373
  export interface GridControlledStateReasonLookup {
374
- filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState';
374
+ filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';
375
375
  pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
376
376
  }
377
377
  export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
@@ -531,13 +531,6 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
531
531
  params: GridRowEditStopParams;
532
532
  event: MuiBaseEvent;
533
533
  };
534
- /**
535
- * Fired when the props of the edit input are committed.
536
- */
537
- rowEditCommit: {
538
- params: GridRowId;
539
- event: MuiBaseEvent;
540
- };
541
534
  /**
542
535
  * Fired when a cell gains focus.
543
536
  * @ignore - do not document.
@@ -1,75 +1,73 @@
1
1
  import * as React from 'react';
2
+ import type { GridSlotProps } from './gridSlotsComponentsProps';
2
3
  import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
3
- import type { GridRowProps } from '../components/GridRow';
4
- import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
5
- import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
6
- import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
4
+ export type { GridSlotProps } from './gridSlotsComponentsProps';
7
5
  export interface GridBaseSlots {
8
6
  /**
9
7
  * The custom Checkbox component used in the grid for both header and cells.
10
8
  * @default Checkbox
11
9
  */
12
- baseCheckbox: React.JSXElementConstructor<any>;
10
+ baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
13
11
  /**
14
12
  * The custom Chip component used in the grid.
15
13
  * @default Chip
16
14
  */
17
- baseChip: React.JSXElementConstructor<any>;
15
+ baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
18
16
  /**
19
17
  * The custom InputAdornment component used in the grid.
20
18
  * @default InputAdornment
21
19
  */
22
- baseInputAdornment: React.JSXElementConstructor<any>;
20
+ baseInputAdornment: React.JSXElementConstructor<GridSlotProps['baseInputAdornment']>;
23
21
  /**
24
22
  * The custom TextField component used in the grid.
25
23
  * @default TextField
26
24
  */
27
- baseTextField: React.JSXElementConstructor<any>;
25
+ baseTextField: React.JSXElementConstructor<GridSlotProps['baseTextField']>;
28
26
  /**
29
27
  * The custom FormControl component used in the grid.
30
28
  * @default FormControl
31
29
  */
32
- baseFormControl: React.JSXElementConstructor<any>;
30
+ baseFormControl: React.JSXElementConstructor<GridSlotProps['baseFormControl']>;
33
31
  /**
34
32
  * The custom Select component used in the grid.
35
33
  * @default Select
36
34
  */
37
- baseSelect: React.JSXElementConstructor<any>;
35
+ baseSelect: React.JSXElementConstructor<GridSlotProps['baseSelect']>;
38
36
  /**
39
37
  * The custom Switch component used in the grid.
40
38
  * @default Switch
41
39
  */
42
- baseSwitch: React.JSXElementConstructor<any>;
40
+ baseSwitch: React.JSXElementConstructor<GridSlotProps['baseSwitch']>;
43
41
  /**
44
42
  * The custom Button component used in the grid.
45
43
  * @default Button
46
44
  */
47
- baseButton: React.JSXElementConstructor<any>;
45
+ baseButton: React.JSXElementConstructor<GridSlotProps['baseButton']>;
48
46
  /**
49
47
  * The custom IconButton component used in the grid.
50
48
  * @default IconButton
51
49
  */
52
- baseIconButton: React.JSXElementConstructor<any>;
50
+ baseIconButton: React.JSXElementConstructor<GridSlotProps['baseIconButton']>;
53
51
  /**
54
52
  * The custom Tooltip component used in the grid.
55
53
  * @default Tooltip
56
54
  */
57
- baseTooltip: React.JSXElementConstructor<any>;
55
+ baseTooltip: React.JSXElementConstructor<GridSlotProps['baseTooltip']>;
58
56
  /**
59
57
  * The custom Popper component used in the grid.
60
58
  * @default Popper
61
59
  */
62
- basePopper: React.JSXElementConstructor<any>;
60
+ basePopper: React.JSXElementConstructor<GridSlotProps['basePopper']>;
63
61
  /**
64
62
  * The custom InputLabel component used in the grid.
65
63
  * @default InputLabel
66
64
  */
67
- baseInputLabel: React.JSXElementConstructor<any>;
65
+ baseInputLabel: React.JSXElementConstructor<GridSlotProps['baseInputLabel']>;
68
66
  /**
69
67
  * The custom SelectOption component used in the grid.
70
68
  * @default MenuItem
71
69
  */
72
- baseSelectOption: React.JSXElementConstructor<any>;
70
+ baseSelectOption: React.JSXElementConstructor<GridSlotProps['baseSelectOption']>;
73
71
  }
74
72
  /**
75
73
  * Grid components React prop interface containing all the overridable components.
@@ -79,87 +77,87 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
79
77
  * The custom Chip component used in the grid.
80
78
  * @default Chip
81
79
  */
82
- baseChip: React.JSXElementConstructor<any>;
80
+ baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
83
81
  /**
84
82
  * Component rendered for each cell.
85
83
  * @default GridCell
86
84
  */
87
- cell: React.JSXElementConstructor<any>;
85
+ cell: React.JSXElementConstructor<GridSlotProps['cell']>;
88
86
  /**
89
87
  * Component rendered for each skeleton cell.
90
88
  * @default GridSkeletonCell
91
89
  */
92
- skeletonCell: React.JSXElementConstructor<any>;
90
+ skeletonCell: React.JSXElementConstructor<GridSlotProps['skeletonCell']>;
93
91
  /**
94
92
  * Filter icon component rendered in each column header.
95
93
  * @default GridColumnHeaderFilterIconButton
96
94
  */
97
- columnHeaderFilterIconButton: React.JSXElementConstructor<any>;
95
+ columnHeaderFilterIconButton: React.JSXElementConstructor<GridSlotProps['columnHeaderFilterIconButton']>;
98
96
  /**
99
97
  * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
100
98
  * @default GridColumnMenu
101
99
  */
102
- columnMenu: React.JSXElementConstructor<any>;
100
+ columnMenu: React.JSXElementConstructor<GridSlotProps['columnMenu']>;
103
101
  /**
104
102
  * Component responsible for rendering the column headers.
105
103
  * @default DataGridColumnHeaders
106
104
  */
107
- columnHeaders: React.JSXElementConstructor<GridColumnHeadersProps>;
105
+ columnHeaders: React.JSXElementConstructor<GridSlotProps['columnHeaders']>;
108
106
  /**
109
107
  * Component responsible for rendering the detail panels.
110
108
  * @default GridDetailPanels
111
109
  */
112
- detailPanels: React.JSXElementConstructor<GridDetailPanelsProps>;
110
+ detailPanels: React.JSXElementConstructor<GridSlotProps['detailPanels']>;
113
111
  /**
114
112
  * Footer component rendered at the bottom of the grid viewport.
115
113
  * @default GridFooter
116
114
  */
117
- footer: React.JSXElementConstructor<any>;
115
+ footer: React.JSXElementConstructor<GridSlotProps['footer']>;
118
116
  /**
119
117
  * Row count component rendered in the footer
120
118
  * @default GridRowCount
121
119
  */
122
- footerRowCount: React.JSXElementConstructor<any>;
120
+ footerRowCount: React.JSXElementConstructor<GridSlotProps['footerRowCount']>;
123
121
  /**
124
122
  * Toolbar component rendered inside the Header component.
125
123
  * @default null
126
124
  */
127
- toolbar: React.JSXElementConstructor<any> | null;
125
+ toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']> | null;
128
126
  /**
129
127
  * Pinned rows container.
130
128
  * @ignore - do not document
131
129
  */
132
- pinnedRows: React.JSXElementConstructor<GridPinnedRowsProps>;
130
+ pinnedRows: React.JSXElementConstructor<GridSlotProps['pinnedRows']>;
133
131
  /**
134
132
  * Loading overlay component rendered when the grid is in a loading state.
135
133
  * @default GridLoadingOverlay
136
134
  */
137
- loadingOverlay: React.JSXElementConstructor<any>;
135
+ loadingOverlay: React.JSXElementConstructor<GridSlotProps['loadingOverlay']>;
138
136
  /**
139
137
  * No results overlay component rendered when the grid has no results after filtering.
140
138
  * @default GridNoResultsOverlay
141
139
  */
142
- noResultsOverlay: React.JSXElementConstructor<any>;
140
+ noResultsOverlay: React.JSXElementConstructor<GridSlotProps['noResultsOverlay']>;
143
141
  /**
144
142
  * No rows overlay component rendered when the grid has no rows.
145
143
  * @default GridNoRowsOverlay
146
144
  */
147
- noRowsOverlay: React.JSXElementConstructor<any>;
145
+ noRowsOverlay: React.JSXElementConstructor<GridSlotProps['noRowsOverlay']>;
148
146
  /**
149
147
  * Pagination component rendered in the grid footer by default.
150
148
  * @default Pagination
151
149
  */
152
- pagination: React.JSXElementConstructor<any> | null;
150
+ pagination: React.JSXElementConstructor<GridSlotProps['pagination']> | null;
153
151
  /**
154
152
  * Filter panel component rendered when clicking the filter button.
155
153
  * @default GridFilterPanel
156
154
  */
157
- filterPanel: React.JSXElementConstructor<any>;
155
+ filterPanel: React.JSXElementConstructor<GridSlotProps['filterPanel']>;
158
156
  /**
159
157
  * GridColumns panel component rendered when clicking the columns button.
160
158
  * @default GridColumnsPanel
161
159
  */
162
- columnsPanel: React.JSXElementConstructor<any>;
160
+ columnsPanel: React.JSXElementConstructor<GridSlotProps['columnsPanel']>;
163
161
  /**
164
162
  * Component used inside Grid Columns panel to manage columns.
165
163
  * @default GridColumnsManagement
@@ -169,10 +167,10 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
169
167
  * Panel component wrapping the filters and columns panels.
170
168
  * @default GridPanel
171
169
  */
172
- panel: React.JSXElementConstructor<any>;
170
+ panel: React.JSXElementConstructor<GridSlotProps['panel']>;
173
171
  /**
174
172
  * Component rendered for each row.
175
173
  * @default GridRow
176
174
  */
177
- row: React.JSXElementConstructor<GridRowProps>;
175
+ row: React.JSXElementConstructor<GridSlotProps['row']>;
178
176
  }
@@ -1,26 +1,31 @@
1
1
  import * as React from 'react';
2
- import { CheckboxProps } from '@mui/material/Checkbox';
3
- import { TextFieldProps } from '@mui/material/TextField';
4
- import { FormControlProps } from '@mui/material/FormControl';
5
- import { SelectProps } from '@mui/material/Select';
6
- import { SwitchProps } from '@mui/material/Switch';
7
- import { ButtonProps } from '@mui/material/Button';
8
- import { IconButtonProps } from '@mui/material/IconButton';
9
- import { TooltipProps } from '@mui/material/Tooltip';
2
+ import type { CheckboxProps } from '@mui/material/Checkbox';
3
+ import type { TextFieldProps } from '@mui/material/TextField';
4
+ import type { FormControlProps } from '@mui/material/FormControl';
5
+ import type { SelectProps } from '@mui/material/Select';
6
+ import type { SwitchProps } from '@mui/material/Switch';
7
+ import type { ButtonProps } from '@mui/material/Button';
8
+ import type { IconButtonProps } from '@mui/material/IconButton';
9
+ import type { InputAdornmentProps } from '@mui/material/InputAdornment';
10
+ import type { TooltipProps } from '@mui/material/Tooltip';
10
11
  import type { InputLabelProps } from '@mui/material/InputLabel';
11
- import { PopperProps } from '@mui/material/Popper';
12
- import { TablePaginationProps } from '@mui/material/TablePagination';
13
- import { ChipProps } from '@mui/material/Chip';
14
- import { GridToolbarProps } from '../components/toolbar/GridToolbar';
15
- import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
16
- import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
17
- import { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel';
18
- import { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel';
19
- import { GridFooterContainerProps } from '../components/containers/GridFooterContainer';
20
- import { GridOverlayProps } from '../components/containers/GridOverlay';
21
- import { GridPanelProps } from '../components/panel/GridPanel';
12
+ import type { PopperProps } from '@mui/material/Popper';
13
+ import type { TablePaginationProps } from '@mui/material/TablePagination';
14
+ import type { ChipProps } from '@mui/material/Chip';
15
+ import type { GridToolbarProps } from '../components/toolbar/GridToolbar';
16
+ import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
17
+ import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
18
+ import type { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel';
19
+ import type { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel';
20
+ import type { GridFooterContainerProps } from '../components/containers/GridFooterContainer';
21
+ import type { GridOverlayProps } from '../components/containers/GridOverlay';
22
+ import type { GridPanelProps } from '../components/panel/GridPanel';
23
+ import type { GridSkeletonCellProps } from '../components/cell/GridSkeletonCell';
22
24
  import type { GridRowProps } from '../components/GridRow';
23
25
  import type { GridCellProps } from '../components/cell/GridCell';
26
+ import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
27
+ import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
28
+ import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
24
29
  import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
25
30
  import type { GridRowCountProps } from '../components';
26
31
  export interface BaseCheckboxPropsOverrides {
@@ -37,6 +42,8 @@ export interface BaseButtonPropsOverrides {
37
42
  }
38
43
  export interface BaseIconButtonPropsOverrides {
39
44
  }
45
+ export interface BaseInputAdornmentPropsOverrides {
46
+ }
40
47
  export interface BaseTooltipPropsOverrides {
41
48
  }
42
49
  export interface BasePopperPropsOverrides {
@@ -57,6 +64,8 @@ export interface ColumnMenuPropsOverrides {
57
64
  }
58
65
  export interface ColumnsPanelPropsOverrides {
59
66
  }
67
+ export interface DetailPanelsPropsOverrides {
68
+ }
60
69
  export interface ColumnsManagementPropsOverrides {
61
70
  }
62
71
  export interface FilterPanelPropsOverrides {
@@ -75,43 +84,53 @@ export interface NoRowsOverlayPropsOverrides {
75
84
  }
76
85
  export interface PanelPropsOverrides {
77
86
  }
87
+ export interface PinnedRowsPropsOverrides {
88
+ }
89
+ export interface SkeletonCellPropsOverrides {
90
+ }
78
91
  export interface RowPropsOverrides {
79
92
  }
80
- type SlotProps<Props, Overrides> = Partial<Props & Overrides>;
81
- /**
82
- * Overridable components props dynamically passed to the component at rendering.
83
- */
84
- export interface GridSlotsComponentsProps {
85
- baseCheckbox?: SlotProps<CheckboxProps, BaseCheckboxPropsOverrides>;
86
- baseTextField?: SlotProps<TextFieldProps, BaseTextFieldPropsOverrides>;
87
- baseFormControl?: SlotProps<FormControlProps, BaseFormControlPropsOverrides>;
88
- baseSelect?: SlotProps<SelectProps, BaseSelectPropsOverrides>;
89
- baseSwitch?: SlotProps<SwitchProps, BaseSwitchPropsOverrides>;
90
- baseButton?: SlotProps<ButtonProps, BaseButtonPropsOverrides>;
91
- baseIconButton?: SlotProps<IconButtonProps, BaseIconButtonPropsOverrides>;
92
- basePopper?: SlotProps<PopperProps, BasePopperPropsOverrides>;
93
- baseTooltip?: SlotProps<TooltipProps, BaseTooltipPropsOverrides>;
94
- baseInputLabel?: SlotProps<InputLabelProps, BaseInputLabelPropsOverrides>;
95
- baseSelectOption?: SlotProps<{
93
+ export interface GridSlotProps {
94
+ baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
95
+ baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
96
+ baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
97
+ baseSelect: SelectProps & BaseSelectPropsOverrides;
98
+ baseSwitch: SwitchProps & BaseSwitchPropsOverrides;
99
+ baseButton: ButtonProps & BaseButtonPropsOverrides;
100
+ baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides;
101
+ basePopper: PopperProps & BasePopperPropsOverrides;
102
+ baseTooltip: TooltipProps & BaseTooltipPropsOverrides;
103
+ baseInputLabel: InputLabelProps & BaseInputLabelPropsOverrides;
104
+ baseInputAdornment: InputAdornmentProps & BaseInputAdornmentPropsOverrides;
105
+ baseSelectOption: {
96
106
  native: boolean;
97
107
  value: any;
98
108
  children?: React.ReactNode;
99
- }, BaseSelectOptionPropsOverrides>;
100
- baseChip?: SlotProps<ChipProps, BaseChipPropsOverrides>;
101
- cell?: SlotProps<GridCellProps, CellPropsOverrides>;
102
- columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
103
- columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;
104
- columnsPanel?: SlotProps<GridColumnsPanelProps, ColumnsPanelPropsOverrides>;
105
- columnsManagement?: SlotProps<GridColumnsManagementProps, ColumnsManagementPropsOverrides>;
106
- filterPanel?: SlotProps<GridFilterPanelProps, FilterPanelPropsOverrides>;
107
- footer?: SlotProps<GridFooterContainerProps, FooterPropsOverrides>;
108
- footerRowCount?: SlotProps<GridRowCountProps, FooterRowCountOverrides>;
109
- loadingOverlay?: SlotProps<GridOverlayProps, LoadingOverlayPropsOverrides>;
110
- noResultsOverlay?: SlotProps<GridOverlayProps, NoResultsOverlayPropsOverrides>;
111
- noRowsOverlay?: SlotProps<GridOverlayProps, NoRowsOverlayPropsOverrides>;
112
- pagination?: SlotProps<TablePaginationProps, PaginationPropsOverrides>;
113
- panel?: SlotProps<GridPanelProps, PanelPropsOverrides>;
114
- row?: SlotProps<GridRowProps, RowPropsOverrides>;
115
- toolbar?: SlotProps<GridToolbarProps, ToolbarPropsOverrides>;
116
- }
117
- export {};
109
+ } & BaseSelectOptionPropsOverrides;
110
+ baseChip: ChipProps & BaseChipPropsOverrides;
111
+ cell: GridCellProps & CellPropsOverrides;
112
+ columnHeaders: GridColumnHeadersProps;
113
+ columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides;
114
+ columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides;
115
+ columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides;
116
+ columnsManagement: GridColumnsManagementProps & ColumnsManagementPropsOverrides;
117
+ detailPanels: GridDetailPanelsProps & DetailPanelsPropsOverrides;
118
+ filterPanel: GridFilterPanelProps & FilterPanelPropsOverrides;
119
+ footer: GridFooterContainerProps & FooterPropsOverrides;
120
+ footerRowCount: GridRowCountProps & FooterRowCountOverrides;
121
+ loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides;
122
+ noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides;
123
+ noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides;
124
+ pagination: Partial<TablePaginationProps> & PaginationPropsOverrides;
125
+ panel: GridPanelProps & PanelPropsOverrides;
126
+ pinnedRows: GridPinnedRowsProps & PinnedRowsPropsOverrides;
127
+ row: GridRowProps & RowPropsOverrides;
128
+ skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides;
129
+ toolbar: GridToolbarProps & ToolbarPropsOverrides;
130
+ }
131
+ /**
132
+ * Overridable components props dynamically passed to the component at rendering.
133
+ */
134
+ export type GridSlotsComponentsProps = Partial<{
135
+ [K in keyof GridSlotProps]: Partial<GridSlotProps[K]>;
136
+ }>;
@@ -64,7 +64,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
64
64
  slots?: Partial<GridSlotsComponent>;
65
65
  /**
66
66
  * Set the locale text of the Data Grid.
67
- * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
67
+ * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
68
68
  */
69
69
  localeText?: Partial<GridLocaleText>;
70
70
  }
@@ -268,7 +268,7 @@ export interface DataGridPropsWithDefaultValues {
268
268
  * Select the pageSize dynamically using the component UI.
269
269
  * @default [25, 50, 100]
270
270
  */
271
- pageSizeOptions: Array<number | {
271
+ pageSizeOptions: ReadonlyArray<number | {
272
272
  value: number;
273
273
  label: string;
274
274
  }>;
@@ -437,12 +437,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
437
437
  * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
438
438
  */
439
439
  onCellEditStop?: GridEventListener<'cellEditStop'>;
440
- /**
441
- * Callback fired when the row changes are committed.
442
- * @param {GridRowId} id The row id.
443
- * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
444
- */
445
- onRowEditCommit?: GridEventListener<'rowEditCommit'>;
446
440
  /**
447
441
  * Callback fired when the row turns to edit mode.
448
442
  * @param {GridRowParams} params With all properties from [[GridRowParams]].
@@ -305,7 +305,7 @@ DataGridRaw.propTypes = {
305
305
  loading: PropTypes.bool,
306
306
  /**
307
307
  * Set the locale text of the Data Grid.
308
- * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
308
+ * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
309
309
  */
310
310
  localeText: PropTypes.object,
311
311
  /**
@@ -493,12 +493,6 @@ DataGridRaw.propTypes = {
493
493
  * @param {GridCallbackDetails} details Additional details for this callback.
494
494
  */
495
495
  onRowDoubleClick: PropTypes.func,
496
- /**
497
- * Callback fired when the row changes are committed.
498
- * @param {GridRowId} id The row id.
499
- * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
500
- */
501
- onRowEditCommit: PropTypes.func,
502
496
  /**
503
497
  * Callback fired when the row turns to edit mode.
504
498
  * @param {GridRowParams} params With all properties from [[GridRowParams]].
@@ -74,7 +74,9 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
74
74
  };
75
75
  const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
76
76
  export const useDataGridProps = inProps => {
77
- const themedProps = useProps(useThemeProps({
77
+ const themedProps = useProps(
78
+ // eslint-disable-next-line material-ui/mui-name-matches-component-name
79
+ useThemeProps({
78
80
  props: inProps,
79
81
  name: 'MuiDataGrid'
80
82
  }));
@@ -24,13 +24,19 @@ const GridPaginationRoot = styled(TablePagination)(({
24
24
  }
25
25
  }
26
26
  }));
27
+
28
+ // A mutable version of a readonly array.
29
+
27
30
  export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
28
31
  const apiRef = useGridApiContext();
29
32
  const rootProps = useGridRootProps();
30
33
  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
31
34
  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
32
35
  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
33
- const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
36
+ const lastPage = React.useMemo(() => {
37
+ const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
38
+ return Math.max(0, calculatedValue);
39
+ }, [rowCount, paginationModel.pageSize]);
34
40
  const handlePageSizeChange = React.useCallback(event => {
35
41
  const pageSize = Number(event.target.value);
36
42
  apiRef.current.setPageSize(pageSize);
@@ -65,7 +71,11 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
65
71
  ref: ref,
66
72
  component: "div",
67
73
  count: rowCount,
68
- page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
74
+ page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
75
+ // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
76
+ // for x-data-grid is past the fix.
77
+ // Note that Material UI will not mutate the array, so this is safe.
78
+ ,
69
79
  rowsPerPageOptions: pageSizeOptions,
70
80
  rowsPerPage: paginationModel.pageSize,
71
81
  onPageChange: handlePageChange,