@mui/x-data-grid 6.10.2 → 6.11.0
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 +92 -0
- package/DataGrid/DataGrid.d.ts +1 -1
- package/DataGrid/DataGrid.js +2 -1
- package/colDef/utils.d.ts +1 -1
- package/colDef/utils.js +1 -1
- package/components/cell/GridCell.js +57 -46
- package/components/columnHeaders/GridBaseColumnHeaders.js +3 -1
- package/components/columnHeaders/GridGenericColumnHeaderItem.js +3 -1
- package/components/containers/GridMainContainer.js +10 -3
- package/components/containers/GridRoot.js +7 -13
- package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts +1 -1
- package/hooks/features/columns/gridColumnsUtils.js +2 -2
- package/hooks/features/virtualization/useGridVirtualScroller.d.ts +7 -4
- package/hooks/features/virtualization/useGridVirtualScroller.js +6 -3
- package/hooks/utils/useGridAriaAttributes.d.ts +6 -0
- package/hooks/utils/useGridAriaAttributes.js +25 -0
- package/index.js +1 -1
- package/legacy/DataGrid/DataGrid.js +2 -1
- package/legacy/colDef/utils.js +1 -1
- package/legacy/components/cell/GridCell.js +57 -46
- package/legacy/components/columnHeaders/GridBaseColumnHeaders.js +3 -1
- package/legacy/components/columnHeaders/GridGenericColumnHeaderItem.js +3 -1
- package/legacy/components/containers/GridMainContainer.js +10 -3
- package/legacy/components/containers/GridRoot.js +7 -13
- package/legacy/hooks/features/columns/gridColumnsUtils.js +2 -2
- package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +6 -3
- package/legacy/hooks/utils/useGridAriaAttributes.js +25 -0
- package/legacy/index.js +1 -1
- package/legacy/locales/fiFI.js +28 -30
- package/legacy/locales/heIL.js +26 -29
- package/legacy/locales/itIT.js +34 -38
- package/locales/fiFI.js +28 -30
- package/locales/heIL.js +26 -29
- package/locales/itIT.js +34 -38
- package/models/gridFilterOperator.d.ts +1 -1
- package/models/props/DataGridProps.d.ts +7 -1
- package/modern/DataGrid/DataGrid.js +2 -1
- package/modern/colDef/utils.js +1 -1
- package/modern/components/cell/GridCell.js +54 -43
- package/modern/components/columnHeaders/GridBaseColumnHeaders.js +3 -1
- package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js +3 -1
- package/modern/components/containers/GridMainContainer.js +9 -3
- package/modern/components/containers/GridRoot.js +6 -13
- package/modern/hooks/features/columns/gridColumnsUtils.js +2 -2
- package/modern/hooks/features/virtualization/useGridVirtualScroller.js +6 -3
- package/modern/hooks/utils/useGridAriaAttributes.js +24 -0
- package/modern/index.js +1 -1
- package/modern/locales/fiFI.js +28 -30
- package/modern/locales/heIL.js +26 -29
- package/modern/locales/itIT.js +34 -38
- package/node/DataGrid/DataGrid.js +2 -1
- package/node/colDef/utils.js +1 -1
- package/node/components/cell/GridCell.js +54 -43
- package/node/components/columnHeaders/GridBaseColumnHeaders.js +3 -1
- package/node/components/columnHeaders/GridGenericColumnHeaderItem.js +3 -1
- package/node/components/containers/GridMainContainer.js +10 -3
- package/node/components/containers/GridRoot.js +6 -13
- package/node/hooks/features/columns/gridColumnsUtils.js +1 -1
- package/node/hooks/features/virtualization/useGridVirtualScroller.js +6 -3
- package/node/hooks/utils/useGridAriaAttributes.js +31 -0
- package/node/index.js +1 -1
- package/node/locales/fiFI.js +28 -30
- package/node/locales/heIL.js +26 -29
- package/node/locales/itIT.js +34 -38
- package/package.json +2 -2
package/modern/locales/fiFI.js
CHANGED
|
@@ -37,7 +37,7 @@ const fiFIGrid = {
|
|
|
37
37
|
columnsPanelHideAllButton: 'Piilota kaikki',
|
|
38
38
|
// Filter panel text
|
|
39
39
|
filterPanelAddFilter: 'Lisää suodatin',
|
|
40
|
-
|
|
40
|
+
filterPanelRemoveAll: 'Poista kaikki',
|
|
41
41
|
filterPanelDeleteIconLabel: 'Poista',
|
|
42
42
|
filterPanelLogicOperator: 'Logiikkaoperaattori',
|
|
43
43
|
filterPanelOperator: 'Operaattorit',
|
|
@@ -48,7 +48,7 @@ const fiFIGrid = {
|
|
|
48
48
|
filterPanelInputPlaceholder: 'Suodattimen arvo',
|
|
49
49
|
// Filter operators text
|
|
50
50
|
filterOperatorContains: 'sisältää',
|
|
51
|
-
filterOperatorEquals: 'on yhtä suuri',
|
|
51
|
+
filterOperatorEquals: 'on yhtä suuri kuin',
|
|
52
52
|
filterOperatorStartsWith: 'alkaa',
|
|
53
53
|
filterOperatorEndsWith: 'päättyy',
|
|
54
54
|
filterOperatorIs: 'on',
|
|
@@ -59,35 +59,33 @@ const fiFIGrid = {
|
|
|
59
59
|
filterOperatorOnOrBefore: 'on sama tai ennen',
|
|
60
60
|
filterOperatorIsEmpty: 'on tyhjä',
|
|
61
61
|
filterOperatorIsNotEmpty: 'ei ole tyhjä',
|
|
62
|
-
filterOperatorIsAnyOf: 'mikä tahansa seuraavista',
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
filterOperatorIsAnyOf: 'on mikä tahansa seuraavista',
|
|
63
|
+
'filterOperator=': '=',
|
|
64
|
+
'filterOperator!=': '!=',
|
|
65
|
+
'filterOperator>': '>',
|
|
66
|
+
'filterOperator>=': '>=',
|
|
67
|
+
'filterOperator<': '<',
|
|
68
|
+
'filterOperator<=': '<=',
|
|
70
69
|
// Header filter operators text
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
70
|
+
headerFilterOperatorContains: 'Sisältää',
|
|
71
|
+
headerFilterOperatorEquals: 'On yhtä suuri kuin',
|
|
72
|
+
headerFilterOperatorStartsWith: 'Alkaa',
|
|
73
|
+
headerFilterOperatorEndsWith: 'Päättyy',
|
|
74
|
+
headerFilterOperatorIs: 'On',
|
|
75
|
+
headerFilterOperatorNot: 'Ei ole',
|
|
76
|
+
headerFilterOperatorAfter: 'On jälkeen',
|
|
77
|
+
headerFilterOperatorOnOrAfter: 'On sama tai jälkeen',
|
|
78
|
+
headerFilterOperatorBefore: 'On ennen',
|
|
79
|
+
headerFilterOperatorOnOrBefore: 'On sama tai ennen',
|
|
80
|
+
headerFilterOperatorIsEmpty: 'On tyhjä',
|
|
81
|
+
headerFilterOperatorIsNotEmpty: 'Ei ole tyhjä',
|
|
82
|
+
headerFilterOperatorIsAnyOf: 'On mikä tahansa seuraavista',
|
|
83
|
+
'headerFilterOperator=': 'On yhtä suuri kuin',
|
|
84
|
+
'headerFilterOperator!=': 'Ei ole yhtä suuri kuin',
|
|
85
|
+
'headerFilterOperator>': 'Enemmän kuin',
|
|
86
|
+
'headerFilterOperator>=': 'Enemmän tai yhtä paljon kuin',
|
|
87
|
+
'headerFilterOperator<': 'Vähemmän kuin',
|
|
88
|
+
'headerFilterOperator<=': 'Vähemmän tai yhtä paljon kuin',
|
|
91
89
|
// Filter values text
|
|
92
90
|
filterValueAny: 'mikä tahansa',
|
|
93
91
|
filterValueTrue: 'tosi',
|
package/modern/locales/heIL.js
CHANGED
|
@@ -68,26 +68,25 @@ const heILGrid = {
|
|
|
68
68
|
// 'filterOperator<=': '<=',
|
|
69
69
|
|
|
70
70
|
// Header filter operators text
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
71
|
+
headerFilterOperatorContains: 'מכיל',
|
|
72
|
+
headerFilterOperatorEquals: 'שווה',
|
|
73
|
+
headerFilterOperatorStartsWith: 'מתחיל ב-',
|
|
74
|
+
headerFilterOperatorEndsWith: 'נגמר ב-',
|
|
75
|
+
headerFilterOperatorIs: 'הינו',
|
|
76
|
+
headerFilterOperatorNot: 'אינו',
|
|
77
|
+
headerFilterOperatorAfter: 'אחרי',
|
|
78
|
+
headerFilterOperatorOnOrAfter: 'ב- או אחרי',
|
|
79
|
+
headerFilterOperatorBefore: 'לפני',
|
|
80
|
+
headerFilterOperatorOnOrBefore: 'ב- או לפני',
|
|
81
|
+
headerFilterOperatorIsEmpty: 'ריק',
|
|
82
|
+
headerFilterOperatorIsNotEmpty: 'אינו ריק',
|
|
83
|
+
headerFilterOperatorIsAnyOf: 'הוא אחד מ-',
|
|
84
|
+
'headerFilterOperator=': 'שווה',
|
|
85
|
+
'headerFilterOperator!=': 'אינו שווה',
|
|
86
|
+
'headerFilterOperator>': 'גדול מ-',
|
|
87
|
+
'headerFilterOperator>=': 'גדול שווה ל-',
|
|
88
|
+
'headerFilterOperator<': 'קטן מ-',
|
|
89
|
+
'headerFilterOperator<=': 'קטן שווה ל-',
|
|
91
90
|
// Filter values text
|
|
92
91
|
filterValueAny: 'כל ערך',
|
|
93
92
|
filterValueTrue: 'כן',
|
|
@@ -140,15 +139,13 @@ const heILGrid = {
|
|
|
140
139
|
expandDetailPanel: 'הרחב',
|
|
141
140
|
collapseDetailPanel: 'כווץ',
|
|
142
141
|
// Row reordering text
|
|
143
|
-
rowReorderingHeaderName: 'סידור שורות'
|
|
144
|
-
|
|
142
|
+
rowReorderingHeaderName: 'סידור שורות',
|
|
145
143
|
// Aggregation
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
144
|
+
aggregationMenuItemHeader: 'צבירה',
|
|
145
|
+
aggregationFunctionLabelSum: 'סכום',
|
|
146
|
+
aggregationFunctionLabelAvg: 'ממוצע',
|
|
147
|
+
aggregationFunctionLabelMin: 'מינימום',
|
|
148
|
+
aggregationFunctionLabelMax: 'מקסימום',
|
|
149
|
+
aggregationFunctionLabelSize: 'גודל'
|
|
152
150
|
};
|
|
153
|
-
|
|
154
151
|
export const heIL = getGridLocalization(heILGrid, heILCore);
|
package/modern/locales/itIT.js
CHANGED
|
@@ -37,7 +37,7 @@ const itITGrid = {
|
|
|
37
37
|
columnsPanelHideAllButton: 'Nascondi tutto',
|
|
38
38
|
// Filter panel text
|
|
39
39
|
filterPanelAddFilter: 'Aggiungi un filtro',
|
|
40
|
-
|
|
40
|
+
filterPanelRemoveAll: 'Rimuovi filtri',
|
|
41
41
|
filterPanelDeleteIconLabel: 'Rimuovi',
|
|
42
42
|
filterPanelLogicOperator: 'Operatore logico',
|
|
43
43
|
filterPanelOperator: 'Operatori',
|
|
@@ -60,34 +60,32 @@ const itITGrid = {
|
|
|
60
60
|
filterOperatorIsEmpty: 'è vuoto',
|
|
61
61
|
filterOperatorIsNotEmpty: 'non è vuoto',
|
|
62
62
|
filterOperatorIsAnyOf: 'è uno tra',
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
63
|
+
'filterOperator=': '=',
|
|
64
|
+
'filterOperator!=': '!=',
|
|
65
|
+
'filterOperator>': '>',
|
|
66
|
+
'filterOperator>=': '>=',
|
|
67
|
+
'filterOperator<': '<',
|
|
68
|
+
'filterOperator<=': '<=',
|
|
70
69
|
// Header filter operators text
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
70
|
+
headerFilterOperatorContains: 'Contiene',
|
|
71
|
+
headerFilterOperatorEquals: 'uguale a',
|
|
72
|
+
headerFilterOperatorStartsWith: 'comincia per',
|
|
73
|
+
headerFilterOperatorEndsWith: 'termina per',
|
|
74
|
+
headerFilterOperatorIs: 'uguale a',
|
|
75
|
+
headerFilterOperatorNot: 'diversa da',
|
|
76
|
+
headerFilterOperatorAfter: 'dopo il',
|
|
77
|
+
headerFilterOperatorOnOrAfter: 'a partire dal',
|
|
78
|
+
headerFilterOperatorBefore: 'prima del',
|
|
79
|
+
headerFilterOperatorOnOrBefore: 'fino al',
|
|
80
|
+
headerFilterOperatorIsEmpty: 'è vuoto',
|
|
81
|
+
headerFilterOperatorIsNotEmpty: 'non è vuoto',
|
|
82
|
+
headerFilterOperatorIsAnyOf: 'è uno tra',
|
|
83
|
+
'headerFilterOperator=': 'uguale a',
|
|
84
|
+
'headerFilterOperator!=': 'diverso da',
|
|
85
|
+
'headerFilterOperator>': 'maggiore di',
|
|
86
|
+
'headerFilterOperator>=': 'maggiore o uguale a',
|
|
87
|
+
'headerFilterOperator<': 'minore di',
|
|
88
|
+
'headerFilterOperator<=': 'minore o uguale a',
|
|
91
89
|
// Filter values text
|
|
92
90
|
filterValueAny: 'qualunque',
|
|
93
91
|
filterValueTrue: 'vero',
|
|
@@ -95,7 +93,7 @@ const itITGrid = {
|
|
|
95
93
|
// Column menu text
|
|
96
94
|
columnMenuLabel: 'Menu',
|
|
97
95
|
columnMenuShowColumns: 'Mostra le colonne',
|
|
98
|
-
|
|
96
|
+
columnMenuManageColumns: 'Gestisci colonne',
|
|
99
97
|
columnMenuFilter: 'Filtra',
|
|
100
98
|
columnMenuHideColumn: 'Nascondi',
|
|
101
99
|
columnMenuUnsort: "Annulla l'ordinamento",
|
|
@@ -139,15 +137,13 @@ const itITGrid = {
|
|
|
139
137
|
expandDetailPanel: 'Espandi',
|
|
140
138
|
collapseDetailPanel: 'Comprimi',
|
|
141
139
|
// Row reordering text
|
|
142
|
-
rowReorderingHeaderName: 'Riordinamento righe'
|
|
143
|
-
|
|
140
|
+
rowReorderingHeaderName: 'Riordinamento righe',
|
|
144
141
|
// Aggregation
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
142
|
+
aggregationMenuItemHeader: 'aggregazione',
|
|
143
|
+
aggregationFunctionLabelSum: 'somma',
|
|
144
|
+
aggregationFunctionLabelAvg: 'media',
|
|
145
|
+
aggregationFunctionLabelMin: 'minimo',
|
|
146
|
+
aggregationFunctionLabelMax: 'massimo',
|
|
147
|
+
aggregationFunctionLabelSize: 'numero di elementi'
|
|
151
148
|
};
|
|
152
|
-
|
|
153
149
|
export const itIT = getGridLocalization(itITGrid, itITCore);
|
|
@@ -170,6 +170,7 @@ DataGridRaw.propTypes = {
|
|
|
170
170
|
* For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
|
|
171
171
|
*/
|
|
172
172
|
experimentalFeatures: _propTypes.default.shape({
|
|
173
|
+
ariaV7: _propTypes.default.bool,
|
|
173
174
|
columnGrouping: _propTypes.default.bool,
|
|
174
175
|
warnIfFocusStateIsNotSynced: _propTypes.default.bool
|
|
175
176
|
}),
|
|
@@ -208,7 +209,7 @@ DataGridRaw.propTypes = {
|
|
|
208
209
|
/**
|
|
209
210
|
* Function that returns the element to render in row detail.
|
|
210
211
|
* @param {GridRowParams} params With all properties from [[GridRowParams]].
|
|
211
|
-
* @returns {JSX.Element} The row detail element.
|
|
212
|
+
* @returns {React.JSX.Element} The row detail element.
|
|
212
213
|
*/
|
|
213
214
|
getDetailPanelContent: _propTypes.default.func,
|
|
214
215
|
/**
|
package/node/colDef/utils.js
CHANGED
|
@@ -20,7 +20,7 @@ const GLOBAL_API_REF = {
|
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* A tagger to determine if the filter is internal or custom user-supplied.
|
|
23
|
-
* To be a valid internal filter, the
|
|
23
|
+
* To be a valid internal filter, the v7 function *must* be defined/redefined at
|
|
24
24
|
* the same time as the legacy one.
|
|
25
25
|
* https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
|
|
26
26
|
*/
|
|
@@ -25,7 +25,6 @@ const _excluded = ["changeReason", "unstable_updateValueOnRender"],
|
|
|
25
25
|
_excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
|
|
26
26
|
_excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
|
|
27
27
|
_excluded4 = ["changeReason", "unstable_updateValueOnRender"];
|
|
28
|
-
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
29
28
|
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); }
|
|
30
29
|
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; }
|
|
31
30
|
const EMPTY_CELL_PARAMS = {
|
|
@@ -295,6 +294,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
295
294
|
children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
296
295
|
className: classes.content,
|
|
297
296
|
title: valueString,
|
|
297
|
+
role: "presentation",
|
|
298
298
|
children: valueString
|
|
299
299
|
});
|
|
300
300
|
}
|
|
@@ -307,27 +307,32 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
307
307
|
onDragEnter: publish('cellDragEnter', onDragEnter),
|
|
308
308
|
onDragOver: publish('cellDragOver', onDragOver)
|
|
309
309
|
};
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
"
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
310
|
+
const ariaV7 = rootProps.experimentalFeatures?.ariaV7;
|
|
311
|
+
return (
|
|
312
|
+
/*#__PURE__*/
|
|
313
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
314
|
+
(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
|
|
315
|
+
ref: handleRef,
|
|
316
|
+
className: (0, _clsx.default)(className, classes.root),
|
|
317
|
+
role: ariaV7 ? 'gridcell' : 'cell',
|
|
318
|
+
"data-field": field,
|
|
319
|
+
"data-colindex": colIndex,
|
|
320
|
+
"aria-colindex": colIndex + 1,
|
|
321
|
+
"aria-colspan": colSpan,
|
|
322
|
+
style: style,
|
|
323
|
+
tabIndex: tabIndex,
|
|
324
|
+
onClick: publish('cellClick', onClick),
|
|
325
|
+
onDoubleClick: publish('cellDoubleClick', onDoubleClick),
|
|
326
|
+
onMouseOver: publish('cellMouseOver', onMouseOver),
|
|
327
|
+
onMouseDown: publishMouseDown('cellMouseDown'),
|
|
328
|
+
onMouseUp: publishMouseUp('cellMouseUp'),
|
|
329
|
+
onKeyDown: publish('cellKeyDown', onKeyDown),
|
|
330
|
+
onKeyUp: publish('cellKeyUp', onKeyUp)
|
|
331
|
+
}, draggableEventHandlers, other, {
|
|
332
|
+
onFocus: handleFocus,
|
|
333
|
+
children: children
|
|
334
|
+
}))
|
|
335
|
+
);
|
|
331
336
|
});
|
|
332
337
|
exports.GridCell = GridCell;
|
|
333
338
|
const MemoizedCellWrapper = (0, _fastMemo.fastMemo)(GridCellWrapper);
|
|
@@ -573,6 +578,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
573
578
|
children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
574
579
|
className: classes.content,
|
|
575
580
|
title: valueString,
|
|
581
|
+
role: "presentation",
|
|
576
582
|
children: valueString
|
|
577
583
|
});
|
|
578
584
|
}
|
|
@@ -585,27 +591,32 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
585
591
|
onDragEnter: publish('cellDragEnter', onDragEnter),
|
|
586
592
|
onDragOver: publish('cellDragOver', onDragOver)
|
|
587
593
|
};
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
"
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
594
|
+
const ariaV7 = rootProps.experimentalFeatures?.ariaV7;
|
|
595
|
+
return (
|
|
596
|
+
/*#__PURE__*/
|
|
597
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
598
|
+
(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
|
|
599
|
+
ref: handleRef,
|
|
600
|
+
className: (0, _clsx.default)(className, classNames, classes.root),
|
|
601
|
+
role: ariaV7 ? 'gridcell' : 'cell',
|
|
602
|
+
"data-field": field,
|
|
603
|
+
"data-colindex": colIndex,
|
|
604
|
+
"aria-colindex": colIndex + 1,
|
|
605
|
+
"aria-colspan": colSpan,
|
|
606
|
+
style: style,
|
|
607
|
+
tabIndex: tabIndex,
|
|
608
|
+
onClick: publish('cellClick', onClick),
|
|
609
|
+
onDoubleClick: publish('cellDoubleClick', onDoubleClick),
|
|
610
|
+
onMouseOver: publish('cellMouseOver', onMouseOver),
|
|
611
|
+
onMouseDown: publishMouseDown('cellMouseDown'),
|
|
612
|
+
onMouseUp: publishMouseUp('cellMouseUp'),
|
|
613
|
+
onKeyDown: publish('cellKeyDown', onKeyDown),
|
|
614
|
+
onKeyUp: publish('cellKeyUp', onKeyUp)
|
|
615
|
+
}, draggableEventHandlers, other, {
|
|
616
|
+
onFocus: handleFocus,
|
|
617
|
+
children: children
|
|
618
|
+
}))
|
|
619
|
+
);
|
|
609
620
|
});
|
|
610
621
|
process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
|
|
611
622
|
// ----------------------------- Warning --------------------------------
|
|
@@ -51,6 +51,8 @@ const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnH
|
|
|
51
51
|
ref: ref,
|
|
52
52
|
className: (0, _clsx.default)(className, classes.root),
|
|
53
53
|
ownerState: rootProps
|
|
54
|
-
}, other
|
|
54
|
+
}, other, {
|
|
55
|
+
role: "presentation"
|
|
56
|
+
}));
|
|
55
57
|
});
|
|
56
58
|
exports.GridBaseColumnHeaders = GridBaseColumnHeaders;
|
|
@@ -83,10 +83,12 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
|
|
|
83
83
|
}, other, {
|
|
84
84
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
|
|
85
85
|
className: classes.draggableContainer,
|
|
86
|
-
draggable: isDraggable
|
|
86
|
+
draggable: isDraggable,
|
|
87
|
+
role: "presentation"
|
|
87
88
|
}, draggableContainerProps, {
|
|
88
89
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
89
90
|
className: classes.titleContainer,
|
|
91
|
+
role: "presentation",
|
|
90
92
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
91
93
|
className: classes.titleContainerContent,
|
|
92
94
|
children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.GridMainContainer = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
7
9
|
var React = _interopRequireWildcard(require("react"));
|
|
8
10
|
var _utils = require("@mui/utils");
|
|
9
11
|
var _system = require("@mui/system");
|
|
10
12
|
var _gridClasses = require("../../constants/gridClasses");
|
|
11
13
|
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
|
|
14
|
+
var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
|
|
12
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
16
|
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); }
|
|
14
17
|
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; }
|
|
@@ -35,11 +38,15 @@ const GridMainContainerRoot = (0, _system.styled)('div', {
|
|
|
35
38
|
const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
36
39
|
const rootProps = (0, _useGridRootProps.useGridRootProps)();
|
|
37
40
|
const classes = useUtilityClasses(rootProps);
|
|
38
|
-
|
|
41
|
+
const getAriaAttributes = rootProps.experimentalFeatures?.ariaV7 // ariaV7 should never change
|
|
42
|
+
? _useGridAriaAttributes.useGridAriaAttributes : null;
|
|
43
|
+
const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMainContainerRoot, (0, _extends2.default)({
|
|
39
45
|
ref: ref,
|
|
40
46
|
className: classes.root,
|
|
41
|
-
ownerState: rootProps
|
|
47
|
+
ownerState: rootProps
|
|
48
|
+
}, ariaAttributes, {
|
|
42
49
|
children: props.children
|
|
43
|
-
});
|
|
50
|
+
}));
|
|
44
51
|
});
|
|
45
52
|
exports.GridMainContainer = GridMainContainer;
|
|
@@ -12,14 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
12
12
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
13
13
|
var _utils = require("@mui/utils");
|
|
14
14
|
var _GridRootStyles = require("./GridRootStyles");
|
|
15
|
-
var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
|
|
16
15
|
var _useGridSelector = require("../../hooks/utils/useGridSelector");
|
|
17
16
|
var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
|
|
18
17
|
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
|
|
19
18
|
var _gridClasses = require("../../constants/gridClasses");
|
|
20
19
|
var _densitySelector = require("../../hooks/features/density/densitySelector");
|
|
21
|
-
var
|
|
22
|
-
var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
|
|
20
|
+
var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
|
|
23
21
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
24
22
|
const _excluded = ["children", "className"];
|
|
25
23
|
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); }
|
|
@@ -43,13 +41,12 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
|
|
|
43
41
|
} = props,
|
|
44
42
|
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
45
43
|
const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
|
|
46
|
-
const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
|
|
47
|
-
const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
|
|
48
44
|
const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
|
|
49
|
-
const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
|
|
50
45
|
const rootContainerRef = React.useRef(null);
|
|
51
46
|
const handleRef = (0, _utils.unstable_useForkRef)(rootContainerRef, ref);
|
|
52
|
-
const
|
|
47
|
+
const getAriaAttributes = rootProps.experimentalFeatures?.ariaV7 // ariaV7 should never change
|
|
48
|
+
? null : _useGridAriaAttributes.useGridAriaAttributes;
|
|
49
|
+
const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
|
|
53
50
|
const ownerState = (0, _extends2.default)({}, rootProps, {
|
|
54
51
|
density: densityValue
|
|
55
52
|
});
|
|
@@ -69,12 +66,8 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
|
|
|
69
66
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
|
|
70
67
|
ref: handleRef,
|
|
71
68
|
className: (0, _clsx.default)(className, classes.root),
|
|
72
|
-
ownerState: ownerState
|
|
73
|
-
|
|
74
|
-
"aria-colcount": visibleColumns.length,
|
|
75
|
-
"aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
|
|
76
|
-
"aria-multiselectable": !rootProps.disableMultipleRowSelection
|
|
77
|
-
}, other, {
|
|
69
|
+
ownerState: ownerState
|
|
70
|
+
}, ariaAttributes, other, {
|
|
78
71
|
children: children
|
|
79
72
|
}));
|
|
80
73
|
});
|
|
@@ -141,7 +141,7 @@ const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
|
|
|
141
141
|
computedWidth = 0;
|
|
142
142
|
flexColumns.push(newColumn);
|
|
143
143
|
} else {
|
|
144
|
-
computedWidth = (0, _utils.clamp)(newColumn.width, newColumn.minWidth, newColumn.maxWidth);
|
|
144
|
+
computedWidth = (0, _utils.clamp)(newColumn.width || _colDef.GRID_STRING_COL_DEF.width, newColumn.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
|
|
145
145
|
}
|
|
146
146
|
widthAllocatedBeforeFlex += computedWidth;
|
|
147
147
|
newColumn.computedWidth = computedWidth;
|
|
@@ -562,15 +562,18 @@ const useGridVirtualScroller = props => {
|
|
|
562
562
|
onWheel: handleWheel,
|
|
563
563
|
onTouchMove: handleTouchMove
|
|
564
564
|
}, inputProps, {
|
|
565
|
-
style: inputProps.style ? (0, _extends2.default)({}, inputProps.style, rootStyle) : rootStyle
|
|
565
|
+
style: inputProps.style ? (0, _extends2.default)({}, inputProps.style, rootStyle) : rootStyle,
|
|
566
|
+
role: 'presentation'
|
|
566
567
|
}),
|
|
567
568
|
getContentProps: ({
|
|
568
569
|
style
|
|
569
570
|
} = {}) => ({
|
|
570
|
-
style: style ? (0, _extends2.default)({}, style, contentSize) : contentSize
|
|
571
|
+
style: style ? (0, _extends2.default)({}, style, contentSize) : contentSize,
|
|
572
|
+
role: 'presentation'
|
|
571
573
|
}),
|
|
572
574
|
getRenderZoneProps: () => ({
|
|
573
|
-
ref: renderZoneRef
|
|
575
|
+
ref: renderZoneRef,
|
|
576
|
+
role: 'rowgroup'
|
|
574
577
|
})
|
|
575
578
|
};
|
|
576
579
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useGridAriaAttributes = void 0;
|
|
7
|
+
var _gridColumnsSelector = require("../features/columns/gridColumnsSelector");
|
|
8
|
+
var _useGridSelector = require("./useGridSelector");
|
|
9
|
+
var _useGridRootProps = require("./useGridRootProps");
|
|
10
|
+
var _gridColumnGroupsSelector = require("../features/columnGrouping/gridColumnGroupsSelector");
|
|
11
|
+
var _gridRowsSelector = require("../features/rows/gridRowsSelector");
|
|
12
|
+
var _useGridPrivateApiContext = require("./useGridPrivateApiContext");
|
|
13
|
+
const useGridAriaAttributes = () => {
|
|
14
|
+
const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
|
|
15
|
+
const rootProps = (0, _useGridRootProps.useGridRootProps)();
|
|
16
|
+
const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
|
|
17
|
+
const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
|
|
18
|
+
const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
|
|
19
|
+
const pinnedRowsCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
|
|
20
|
+
let role = 'grid';
|
|
21
|
+
if (rootProps.experimentalFeatures?.ariaV7 && rootProps.treeData) {
|
|
22
|
+
role = 'treegrid';
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
role,
|
|
26
|
+
'aria-colcount': visibleColumns.length,
|
|
27
|
+
'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
|
|
28
|
+
'aria-multiselectable': !rootProps.disableMultipleRowSelection
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
exports.useGridAriaAttributes = useGridAriaAttributes;
|
package/node/index.js
CHANGED