@mui/x-data-grid 7.0.0-alpha.1 → 7.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/CHANGELOG.md +607 -188
  2. package/DataGrid/DataGrid.d.ts +0 -10
  3. package/DataGrid/DataGrid.js +11 -23
  4. package/DataGrid/useDataGridProps.js +1 -1
  5. package/README.md +0 -1
  6. package/components/GridHeader.js +3 -2
  7. package/components/GridPagination.d.ts +2 -2
  8. package/components/GridRow.js +2 -4
  9. package/components/cell/GridCell.js +3 -3
  10. package/components/cell/GridEditDateCell.js +1 -20
  11. package/components/columnHeaders/GridColumnGroupHeader.js +2 -1
  12. package/components/columnHeaders/GridColumnHeaderItem.js +2 -1
  13. package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +1 -1
  14. package/components/panel/filterPanel/GridFilterForm.js +2 -2
  15. package/components/panel/filterPanel/GridFilterInputValue.js +1 -1
  16. package/components/panel/index.d.ts +0 -1
  17. package/components/panel/index.js +0 -1
  18. package/constants/defaultGridSlotsComponents.js +1 -2
  19. package/hooks/features/clipboard/useGridClipboard.d.ts +1 -1
  20. package/hooks/features/clipboard/useGridClipboard.js +1 -1
  21. package/hooks/features/editing/useGridCellEditing.js +8 -21
  22. package/hooks/features/editing/useGridRowEditing.js +7 -21
  23. package/hooks/features/export/useGridCsvExport.d.ts +1 -1
  24. package/hooks/features/export/useGridCsvExport.js +1 -1
  25. package/hooks/features/filter/gridFilterUtils.d.ts +1 -0
  26. package/hooks/features/filter/gridFilterUtils.js +7 -4
  27. package/hooks/features/filter/useGridFilter.js +2 -2
  28. package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -1
  29. package/hooks/features/rowSelection/useGridRowSelection.js +2 -1
  30. package/hooks/features/sorting/useGridSorting.js +6 -5
  31. package/index.js +1 -1
  32. package/internals/index.d.ts +1 -1
  33. package/internals/index.js +1 -1
  34. package/legacy/DataGrid/DataGrid.js +11 -23
  35. package/legacy/DataGrid/useDataGridProps.js +1 -1
  36. package/legacy/colDef/gridDefaultColumnTypes.js +2 -3
  37. package/legacy/components/GridHeader.js +3 -2
  38. package/legacy/components/GridPagination.js +3 -4
  39. package/legacy/components/GridRow.js +2 -4
  40. package/legacy/components/cell/GridCell.js +3 -3
  41. package/legacy/components/cell/GridEditDateCell.js +1 -20
  42. package/legacy/components/columnHeaders/GridColumnGroupHeader.js +2 -1
  43. package/legacy/components/columnHeaders/GridColumnHeaderItem.js +2 -1
  44. package/legacy/components/columnHeaders/GridColumnHeadersInner.js +4 -5
  45. package/legacy/components/containers/GridRootStyles.js +69 -70
  46. package/legacy/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +1 -1
  47. package/legacy/components/panel/filterPanel/GridFilterForm.js +2 -2
  48. package/legacy/components/panel/filterPanel/GridFilterInputValue.js +1 -1
  49. package/legacy/components/panel/index.js +0 -1
  50. package/legacy/components/toolbar/GridToolbarQuickFilter.js +4 -5
  51. package/legacy/constants/defaultGridSlotsComponents.js +1 -2
  52. package/legacy/hooks/features/clipboard/useGridClipboard.js +1 -1
  53. package/legacy/hooks/features/editing/useGridCellEditing.js +8 -21
  54. package/legacy/hooks/features/editing/useGridRowEditing.js +7 -23
  55. package/legacy/hooks/features/export/useGridCsvExport.js +1 -1
  56. package/legacy/hooks/features/filter/gridFilterUtils.js +7 -4
  57. package/legacy/hooks/features/filter/useGridFilter.js +2 -2
  58. package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -1
  59. package/legacy/hooks/features/rowSelection/useGridRowSelection.js +2 -1
  60. package/legacy/hooks/features/sorting/useGridSorting.js +6 -5
  61. package/legacy/index.js +1 -1
  62. package/legacy/internals/index.js +1 -1
  63. package/legacy/locales/arSD.js +1 -1
  64. package/legacy/locales/bgBG.js +33 -37
  65. package/legacy/locales/heIL.js +1 -2
  66. package/legacy/models/params/gridEditCellParams.js +1 -0
  67. package/legacy/utils/domUtils.js +10 -15
  68. package/locales/arSD.js +1 -1
  69. package/locales/bgBG.js +33 -37
  70. package/locales/heIL.js +1 -2
  71. package/models/api/gridEditingApi.d.ts +2 -4
  72. package/models/api/gridSortApi.d.ts +2 -2
  73. package/models/gridFilterModel.d.ts +2 -2
  74. package/models/gridSlotsComponent.d.ts +0 -5
  75. package/models/gridSlotsComponentsProps.d.ts +0 -3
  76. package/models/params/gridEditCellParams.d.ts +3 -1
  77. package/models/params/gridEditCellParams.js +1 -0
  78. package/models/params/gridRowParams.d.ts +1 -0
  79. package/models/props/DataGridProps.d.ts +1 -1
  80. package/modern/DataGrid/DataGrid.js +11 -23
  81. package/modern/DataGrid/useDataGridProps.js +1 -1
  82. package/modern/components/GridHeader.js +2 -1
  83. package/modern/components/GridRow.js +2 -4
  84. package/modern/components/cell/GridCell.js +2 -2
  85. package/modern/components/cell/GridEditDateCell.js +1 -20
  86. package/modern/components/columnHeaders/GridColumnGroupHeader.js +2 -1
  87. package/modern/components/columnHeaders/GridColumnHeaderItem.js +2 -1
  88. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +1 -1
  89. package/modern/components/panel/filterPanel/GridFilterForm.js +2 -2
  90. package/modern/components/panel/filterPanel/GridFilterInputValue.js +1 -1
  91. package/modern/components/panel/index.js +0 -1
  92. package/modern/constants/defaultGridSlotsComponents.js +1 -2
  93. package/modern/hooks/features/clipboard/useGridClipboard.js +1 -1
  94. package/modern/hooks/features/editing/useGridCellEditing.js +8 -21
  95. package/modern/hooks/features/editing/useGridRowEditing.js +7 -21
  96. package/modern/hooks/features/export/useGridCsvExport.js +1 -1
  97. package/modern/hooks/features/filter/gridFilterUtils.js +4 -2
  98. package/modern/hooks/features/filter/useGridFilter.js +2 -2
  99. package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -1
  100. package/modern/hooks/features/rowSelection/useGridRowSelection.js +2 -1
  101. package/modern/hooks/features/sorting/useGridSorting.js +6 -5
  102. package/modern/index.js +1 -1
  103. package/modern/internals/index.js +1 -1
  104. package/modern/locales/arSD.js +1 -1
  105. package/modern/locales/bgBG.js +33 -37
  106. package/modern/locales/heIL.js +1 -2
  107. package/modern/models/params/gridEditCellParams.js +1 -0
  108. package/modern/utils/domUtils.js +10 -15
  109. package/node/DataGrid/DataGrid.js +11 -23
  110. package/node/DataGrid/useDataGridProps.js +1 -1
  111. package/node/components/GridHeader.js +2 -1
  112. package/node/components/GridRow.js +1 -3
  113. package/node/components/cell/GridCell.js +2 -2
  114. package/node/components/cell/GridEditDateCell.js +1 -20
  115. package/node/components/columnHeaders/GridColumnGroupHeader.js +2 -1
  116. package/node/components/columnHeaders/GridColumnHeaderItem.js +2 -1
  117. package/node/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +1 -1
  118. package/node/components/panel/filterPanel/GridFilterForm.js +2 -2
  119. package/node/components/panel/filterPanel/GridFilterInputValue.js +1 -1
  120. package/node/components/panel/index.js +0 -11
  121. package/node/constants/defaultGridSlotsComponents.js +0 -1
  122. package/node/hooks/features/clipboard/useGridClipboard.js +1 -1
  123. package/node/hooks/features/editing/useGridCellEditing.js +7 -20
  124. package/node/hooks/features/editing/useGridRowEditing.js +6 -20
  125. package/node/hooks/features/export/useGridCsvExport.js +1 -1
  126. package/node/hooks/features/filter/gridFilterUtils.js +6 -3
  127. package/node/hooks/features/filter/useGridFilter.js +1 -1
  128. package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -1
  129. package/node/hooks/features/rowSelection/useGridRowSelection.js +2 -1
  130. package/node/hooks/features/sorting/useGridSorting.js +6 -5
  131. package/node/index.js +1 -1
  132. package/node/internals/index.js +7 -0
  133. package/node/locales/arSD.js +1 -1
  134. package/node/locales/bgBG.js +33 -37
  135. package/node/locales/heIL.js +1 -2
  136. package/node/models/params/gridEditCellParams.js +1 -0
  137. package/node/utils/domUtils.js +11 -18
  138. package/package.json +6 -5
  139. package/utils/domUtils.d.ts +2 -3
  140. package/utils/domUtils.js +10 -15
@@ -13,7 +13,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
13
13
  import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
14
14
  import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
15
15
  import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
16
- import { findParentElementFromClassName } from '../utils/domUtils';
16
+ import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
17
17
  import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
18
18
  import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
19
19
  import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
@@ -137,9 +137,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
137
137
  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
138
138
  const publish = React.useCallback((eventName, propHandler) => event => {
139
139
  // Ignore portal
140
- // The target is not an element when triggered by a Select inside the cell
141
- // See https://github.com/mui/material-ui/issues/10534
142
- if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
140
+ if (isEventTargetInPortal(event)) {
143
141
  return;
144
142
  }
145
143
 
@@ -459,8 +459,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
459
459
  const cellRef = React.useRef(null);
460
460
  const handleRef = useForkRef(ref, cellRef);
461
461
  const focusElementRef = React.useRef(null);
462
- // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
463
- const isSelectionMode = rootProps.unstable_cellSelection ?? false;
462
+ // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
463
+ const isSelectionMode = rootProps.cellSelection ?? false;
464
464
  const ownerState = {
465
465
  align,
466
466
  showRightBorder,
@@ -63,7 +63,6 @@ function GridEditDateCell(props) {
63
63
  classes: rootProps.classes
64
64
  };
65
65
  const classes = useUtilityClasses(ownerState);
66
- const hasUpdatedEditValueOnMount = React.useRef(false);
67
66
  const parseValueToDate = React.useCallback(value => {
68
67
  if (value === '') {
69
68
  return null;
@@ -108,26 +107,8 @@ function GridEditDateCell(props) {
108
107
  inputRef.current.focus();
109
108
  }
110
109
  }, [hasFocus]);
111
- const meta = apiRef.current.unstable_getEditCellMeta(id, field);
112
- const handleInputRef = el => {
113
- inputRef.current = el;
114
- if (meta?.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
115
- const inputValue = inputRef.current.value;
116
- const parsedDate = parseValueToDate(inputValue);
117
- setValueState({
118
- parsed: parsedDate,
119
- formatted: inputValue
120
- });
121
- apiRef.current.setEditCellValue({
122
- id,
123
- field,
124
- value: parsedDate
125
- });
126
- hasUpdatedEditValueOnMount.current = true;
127
- }
128
- };
129
110
  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
130
- inputRef: handleInputRef,
111
+ inputRef: inputRef,
131
112
  fullWidth: true,
132
113
  className: classes.root,
133
114
  type: isDateTime ? 'datetime-local' : 'date',
@@ -7,6 +7,7 @@ import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGroup
7
7
  import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
8
8
  import { useGridSelector } from '../../hooks/utils/useGridSelector';
9
9
  import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
10
+ import { isEventTargetInPortal } from '../../utils/domUtils';
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  const useUtilityClasses = ownerState => {
12
13
  const {
@@ -84,7 +85,7 @@ function GridColumnGroupHeader(props) {
84
85
  const publish = React.useCallback(eventName => event => {
85
86
  // Ignore portal
86
87
  // See https://github.com/mui/mui-x/issues/1721
87
- if (!event.currentTarget.contains(event.target)) {
88
+ if (isEventTargetInPortal(event)) {
88
89
  return;
89
90
  }
90
91
  apiRef.current.publishEvent(eventName, renderParams, event);
@@ -9,6 +9,7 @@ import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
9
9
  import { getDataGridUtilityClass } from '../../constants/gridClasses';
10
10
  import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
11
11
  import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
12
+ import { isEventTargetInPortal } from '../../utils/domUtils';
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const useUtilityClasses = ownerState => {
@@ -67,7 +68,7 @@ function GridColumnHeaderItem(props) {
67
68
  const publish = React.useCallback(eventName => event => {
68
69
  // Ignore portal
69
70
  // See https://github.com/mui/mui-x/issues/1721
70
- if (!event.currentTarget.contains(event.target)) {
71
+ if (isEventTargetInPortal(event)) {
71
72
  return;
72
73
  }
73
74
  apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
@@ -28,7 +28,7 @@ function GridColumnMenuSortItem(props) {
28
28
  const onSortMenuItemClick = React.useCallback(event => {
29
29
  onClick(event);
30
30
  const direction = event.currentTarget.getAttribute('data-value') || null;
31
- apiRef.current.sortColumn(colDef, direction === sortDirection ? null : direction);
31
+ apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
32
32
  }, [apiRef, colDef, onClick, sortDirection]);
33
33
  if (!colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
34
34
  return null;
@@ -176,8 +176,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
176
176
  // try to keep the same operator when column change
177
177
  const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
178
178
 
179
- // Erase filter value if the input component is modified
180
- const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent;
179
+ // Erase filter value if the input component or filtered column type is modified
180
+ const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
181
181
  applyFilterChanges(_extends({}, item, {
182
182
  field,
183
183
  operator: newOperator.value,
@@ -42,7 +42,7 @@ function GridFilterInputValue(props) {
42
42
  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
43
43
  React.useEffect(() => {
44
44
  const itemPlusTag = item;
45
- if (itemPlusTag.fromInput !== id) {
45
+ if (itemPlusTag.fromInput !== id || item.value === undefined) {
46
46
  setFilterValueState(String(item.value ?? ''));
47
47
  }
48
48
  }, [id, item]);
@@ -4,5 +4,4 @@ export * from './GridPanelContent';
4
4
  export * from './GridPanelFooter';
5
5
  export * from './GridPanelHeader';
6
6
  export * from './GridPanelWrapper';
7
- export * from './GridPreferencesPanel';
8
7
  export * from './filterPanel';
@@ -1,5 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
2
+ import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
3
3
  import { GridCellV7 } from '../components/cell/GridCell';
4
4
  import { GridColumnHeaders } from '../components/GridColumnHeaders';
5
5
  import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -17,7 +17,6 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
17
17
  footer: GridFooter,
18
18
  footerRowCount: GridRowCount,
19
19
  toolbar: null,
20
- preferencesPanel: GridPreferencesPanel,
21
20
  loadingOverlay: GridLoadingOverlay,
22
21
  noResultsOverlay: GridNoResultsOverlay,
23
22
  noRowsOverlay: GridNoRowsOverlay,
@@ -49,7 +49,7 @@ function hasNativeSelection(element) {
49
49
  * @requires useGridSelection (method)
50
50
  */
51
51
  export const useGridClipboard = (apiRef, props) => {
52
- const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
52
+ const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
53
53
  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
54
54
  const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
55
55
  const handleCopy = React.useCallback(event => {
@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  const _excluded = ["id", "field"],
5
5
  _excluded2 = ["id", "field"];
6
6
  import * as React from 'react';
7
- import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
7
+ import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
8
8
  import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
9
9
  import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
10
10
  import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -101,7 +101,7 @@ export const useGridCellEditing = (apiRef, props) => {
101
101
  if (isPrintableKey(event)) {
102
102
  reason = GridCellEditStartReasons.printableKeyDown;
103
103
  } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
104
- reason = GridCellEditStartReasons.printableKeyDown;
104
+ reason = GridCellEditStartReasons.pasteKeyDown;
105
105
  } else if (event.key === 'Enter') {
106
106
  reason = GridCellEditStartReasons.enterKeyDown;
107
107
  } else if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -121,24 +121,13 @@ export const useGridCellEditing = (apiRef, props) => {
121
121
  const {
122
122
  id,
123
123
  field,
124
- reason,
125
- key,
126
- colDef
124
+ reason
127
125
  } = params;
128
126
  const startCellEditModeParams = {
129
127
  id,
130
128
  field
131
129
  };
132
- if (reason === GridCellEditStartReasons.printableKeyDown) {
133
- if (React.version.startsWith('17')) {
134
- // In React 17, cleaning the input is enough.
135
- // The sequence of events makes the key pressed by the end-users update the textbox directly.
136
- startCellEditModeParams.deleteValue = true;
137
- } else {
138
- const initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
139
- startCellEditModeParams.initialValue = initialValue;
140
- }
141
- } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
130
+ if (reason === GridCellEditStartReasons.printableKeyDown || reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.pasteKeyDown) {
142
131
  startCellEditModeParams.deleteValue = true;
143
132
  }
144
133
  apiRef.current.startCellEditMode(startCellEditModeParams);
@@ -248,17 +237,13 @@ export const useGridCellEditing = (apiRef, props) => {
248
237
  initialValue
249
238
  } = params;
250
239
  let newValue = apiRef.current.getCellValue(id, field);
251
- // eslint-disable-next-line @typescript-eslint/naming-convention
252
- let unstable_updateValueOnRender = false;
253
240
  if (deleteValue || initialValue) {
254
241
  newValue = deleteValue ? '' : initialValue;
255
- unstable_updateValueOnRender = true;
256
242
  }
257
243
  const newProps = {
258
244
  value: newValue,
259
245
  error: false,
260
- isProcessingProps: false,
261
- unstable_updateValueOnRender
246
+ isProcessingProps: false
262
247
  };
263
248
  updateOrDeleteFieldState(id, field, newProps);
264
249
  apiRef.current.setCellFocus(id, field);
@@ -422,7 +407,9 @@ export const useGridCellEditing = (apiRef, props) => {
422
407
  updateCellModesModel(cellModesModelProp);
423
408
  }
424
409
  }, [cellModesModelProp, updateCellModesModel]);
425
- React.useEffect(() => {
410
+
411
+ // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
412
+ useEnhancedEffect(() => {
426
413
  const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
427
414
 
428
415
  // Update the ref here because updateStateToStopCellEditMode may change it later
@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  const _excluded = ["id"],
5
5
  _excluded2 = ["id"];
6
6
  import * as React from 'react';
7
- import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
7
+ import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
8
8
  import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
9
9
  import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
10
10
  import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -171,7 +171,6 @@ export const useGridRowEditing = (apiRef, props) => {
171
171
  const rowParams = apiRef.current.getRowParams(params.id);
172
172
  const newParams = _extends({}, rowParams, {
173
173
  field: params.field,
174
- key: event.key,
175
174
  reason
176
175
  });
177
176
  apiRef.current.publishEvent('rowEditStart', newParams, event);
@@ -182,24 +181,13 @@ export const useGridRowEditing = (apiRef, props) => {
182
181
  const {
183
182
  id,
184
183
  field,
185
- reason,
186
- key,
187
- columns
184
+ reason
188
185
  } = params;
189
186
  const startRowEditModeParams = {
190
187
  id,
191
188
  fieldToFocus: field
192
189
  };
193
- if (reason === GridRowEditStartReasons.printableKeyDown) {
194
- if (React.version.startsWith('17')) {
195
- // In React 17, cleaning the input is enough.
196
- // The sequence of events makes the key pressed by the end-users update the textbox directly.
197
- startRowEditModeParams.deleteValue = !!field;
198
- } else {
199
- const colDef = columns.find(col => col.field === field);
200
- startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
201
- }
202
- } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
190
+ if (reason === GridRowEditStartReasons.printableKeyDown || reason === GridRowEditStartReasons.deleteKeyDown) {
203
191
  startRowEditModeParams.deleteValue = !!field;
204
192
  }
205
193
  apiRef.current.startRowEditMode(startRowEditModeParams);
@@ -322,17 +310,13 @@ export const useGridRowEditing = (apiRef, props) => {
322
310
  return acc;
323
311
  }
324
312
  let newValue = apiRef.current.getCellValue(id, field);
325
- // eslint-disable-next-line @typescript-eslint/naming-convention
326
- let unstable_updateValueOnRender = false;
327
313
  if (fieldToFocus === field && (deleteValue || initialValue)) {
328
314
  newValue = deleteValue ? '' : initialValue;
329
- unstable_updateValueOnRender = true;
330
315
  }
331
316
  acc[field] = {
332
317
  value: newValue,
333
318
  error: false,
334
- isProcessingProps: false,
335
- unstable_updateValueOnRender
319
+ isProcessingProps: false
336
320
  };
337
321
  return acc;
338
322
  }, {});
@@ -552,7 +536,9 @@ export const useGridRowEditing = (apiRef, props) => {
552
536
  updateRowModesModel(rowModesModelProp);
553
537
  }
554
538
  }, [rowModesModelProp, updateRowModesModel]);
555
- React.useEffect(() => {
539
+
540
+ // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
541
+ useEnhancedEffect(() => {
556
542
  const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
557
543
 
558
544
  // Update the ref here because updateStateToStopRowEditMode may change it later
@@ -16,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
16
16
  */
17
17
  export const useGridCsvExport = (apiRef, props) => {
18
18
  const logger = useGridLogger(apiRef, 'useGridCsvExport');
19
- const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
19
+ const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
20
20
  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.csvExport : ignoreValueFormatterProp) || false;
21
21
  const getDataAsCsv = React.useCallback((options = {}) => {
22
22
  logger.debug(`Get data as CSV`);
@@ -174,6 +174,9 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
174
174
  filterItemsApplierId += 1;
175
175
  return filterItem;
176
176
  };
177
+ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
178
+ return filterModel.quickFilterExcludeHiddenColumns ?? true;
179
+ };
177
180
 
178
181
  /**
179
182
  * Generates a method to easily check if a row is matching the current quick filter.
@@ -186,8 +189,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
186
189
  if (quickFilterValues.length === 0) {
187
190
  return null;
188
191
  }
189
- const quickFilterExcludeHiddenColumns = filterModel.quickFilterExcludeHiddenColumns ?? false;
190
- const columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
192
+ const columnFields = shouldQuickFilterExcludeHiddenColumns(filterModel) ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
191
193
  const appliersPerField = [];
192
194
  const {
193
195
  ignoreDiacritics
@@ -14,7 +14,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
14
14
  import { gridRowsLookupSelector } from '../rows';
15
15
  import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
16
16
  import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
17
- import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
17
+ import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns } from './gridFilterUtils';
18
18
  import { isDeepEqual } from '../../../utils/utils';
19
19
  import { jsx as _jsx } from "react/jsx-runtime";
20
20
  export const filterStateInitializer = (state, props, apiRef) => {
@@ -339,7 +339,7 @@ export const useGridFilter = (apiRef, props) => {
339
339
  useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
340
340
  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
341
341
  const filterModel = gridFilterModelSelector(apiRef);
342
- if (filterModel.quickFilterValues && filterModel.quickFilterExcludeHiddenColumns) {
342
+ if (filterModel.quickFilterValues && shouldQuickFilterExcludeHiddenColumns(filterModel)) {
343
343
  // re-apply filters because the quick filter results may have changed
344
344
  apiRef.current.unstable_applyFilters();
345
345
  }
@@ -15,6 +15,7 @@ import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
15
15
  import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
16
16
  import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
17
17
  import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
18
+ import { isEventTargetInPortal } from '../../../utils/domUtils';
18
19
  function enrichPageRowsWithPinnedRows(apiRef, rows) {
19
20
  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
20
21
  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -413,7 +414,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
413
414
  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
414
415
  const handleCellKeyDown = React.useCallback((params, event) => {
415
416
  // Ignore portal
416
- if (!event.currentTarget.contains(event.target)) {
417
+ if (isEventTargetInPortal(event)) {
417
418
  return;
418
419
  }
419
420
 
@@ -14,6 +14,7 @@ import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
14
14
  import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
15
15
  import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
16
16
  import { gridClasses } from '../../../constants/gridClasses';
17
+ import { isEventTargetInPortal } from '../../../utils/domUtils';
17
18
  const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
18
19
  if (selectionModelProp == null) {
19
20
  return selectionModelProp;
@@ -283,7 +284,7 @@ export const useGridRowSelection = (apiRef, props) => {
283
284
 
284
285
  // Ignore portal
285
286
  // Do not apply shortcuts if the focus is not on the cell root component
286
- if (!event.currentTarget.contains(event.target)) {
287
+ if (isEventTargetInPortal(event)) {
287
288
  return;
288
289
  }
289
290
  if (isNavigationKey(event.key) && event.shiftKey) {
@@ -112,7 +112,8 @@ export const useGridSorting = (apiRef, props) => {
112
112
  apiRef.current.applySorting();
113
113
  }
114
114
  }, [apiRef, logger, props.disableMultipleColumnsSorting]);
115
- const sortColumn = React.useCallback((column, direction, allowMultipleSorting) => {
115
+ const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
116
+ const column = apiRef.current.getColumn(field);
116
117
  if (!column.sortable) {
117
118
  return;
118
119
  }
@@ -193,17 +194,17 @@ export const useGridSorting = (apiRef, props) => {
193
194
  * EVENTS
194
195
  */
195
196
  const handleColumnHeaderClick = React.useCallback(({
196
- colDef
197
+ field
197
198
  }, event) => {
198
199
  const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
199
- sortColumn(colDef, undefined, allowMultipleSorting);
200
+ sortColumn(field, undefined, allowMultipleSorting);
200
201
  }, [sortColumn]);
201
202
  const handleColumnHeaderKeyDown = React.useCallback(({
202
- colDef
203
+ field
203
204
  }, event) => {
204
205
  // Ctrl + Enter opens the column menu
205
206
  if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
206
- sortColumn(colDef, undefined, event.shiftKey);
207
+ sortColumn(field, undefined, event.shiftKey);
207
208
  }
208
209
  }, [sortColumn]);
209
210
  const handleColumnsChange = React.useCallback(() => {
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid v7.0.0-alpha.1
2
+ * @mui/x-data-grid v7.0.0-alpha.3
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -54,7 +54,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
54
54
  export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
55
55
  export * from '../utils/createControllablePromise';
56
56
  export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
57
- export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
57
+ export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
58
58
  export { isNavigationKey } from '../utils/keyboardUtils';
59
59
  export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
60
60
  export { buildWarning } from '../utils/warning';
@@ -93,7 +93,7 @@ const arSDGrid = {
93
93
  // Column menu text
94
94
  columnMenuLabel: 'القائمة',
95
95
  columnMenuShowColumns: 'إظهار الأعمدة',
96
- // columnMenuManageColumns: 'Manage columns',
96
+ columnMenuManageColumns: 'إدارة الأعمدة',
97
97
  columnMenuFilter: 'المرشِح',
98
98
  columnMenuHideColumn: 'إخفاء',
99
99
  columnMenuUnsort: 'الغاء الفرز',
@@ -60,34 +60,32 @@ const bgBGGrid = {
60
60
  filterOperatorIsEmpty: 'е празен',
61
61
  filterOperatorIsNotEmpty: 'не е празен',
62
62
  filterOperatorIsAnyOf: 'е някой от',
63
- // 'filterOperator=': '=',
64
- // 'filterOperator!=': '!=',
65
- // 'filterOperator>': '>',
66
- // 'filterOperator>=': '>=',
67
- // 'filterOperator<': '<',
68
- // 'filterOperator<=': '<=',
69
-
63
+ 'filterOperator=': '=',
64
+ 'filterOperator!=': '!=',
65
+ 'filterOperator>': '>',
66
+ 'filterOperator>=': '>=',
67
+ 'filterOperator<': '<',
68
+ 'filterOperator<=': '<=',
70
69
  // Header filter operators text
71
- // headerFilterOperatorContains: 'Contains',
72
- // headerFilterOperatorEquals: 'Equals',
73
- // headerFilterOperatorStartsWith: 'Starts with',
74
- // headerFilterOperatorEndsWith: 'Ends with',
75
- // headerFilterOperatorIs: 'Is',
76
- // headerFilterOperatorNot: 'Is not',
77
- // headerFilterOperatorAfter: 'Is after',
78
- // headerFilterOperatorOnOrAfter: 'Is on or after',
79
- // headerFilterOperatorBefore: 'Is before',
80
- // headerFilterOperatorOnOrBefore: 'Is on or before',
81
- // headerFilterOperatorIsEmpty: 'Is empty',
82
- // headerFilterOperatorIsNotEmpty: 'Is not empty',
83
- // headerFilterOperatorIsAnyOf: 'Is any of',
84
- // 'headerFilterOperator=': 'Equals',
85
- // 'headerFilterOperator!=': 'Not equals',
86
- // 'headerFilterOperator>': 'Greater than',
87
- // 'headerFilterOperator>=': 'Greater than or equal to',
88
- // 'headerFilterOperator<': 'Less than',
89
- // 'headerFilterOperator<=': 'Less than or equal to',
90
-
70
+ headerFilterOperatorContains: 'Съдържа',
71
+ headerFilterOperatorEquals: 'Равнo',
72
+ headerFilterOperatorStartsWith: 'Започва с',
73
+ headerFilterOperatorEndsWith: 'Завършва с',
74
+ headerFilterOperatorIs: 'Равно е на',
75
+ headerFilterOperatorNot: 'Не се равнява на',
76
+ headerFilterOperatorAfter: 'След',
77
+ headerFilterOperatorOnOrAfter: 'След (включително)',
78
+ headerFilterOperatorBefore: 'Преди',
79
+ headerFilterOperatorOnOrBefore: 'Преди (включително)',
80
+ headerFilterOperatorIsEmpty: 'Празен',
81
+ headerFilterOperatorIsNotEmpty: 'Не е празен',
82
+ headerFilterOperatorIsAnyOf: 'Всичко от',
83
+ 'headerFilterOperator=': 'Равно',
84
+ 'headerFilterOperator!=': 'Различно',
85
+ 'headerFilterOperator>': 'По-голямо от',
86
+ 'headerFilterOperator>=': 'По-голямо или равно на',
87
+ 'headerFilterOperator<': 'По-малко от',
88
+ 'headerFilterOperator<=': 'По-малко или равно на',
91
89
  // Filter values text
92
90
  filterValueAny: 'всякакви',
93
91
  filterValueTrue: 'вярно',
@@ -135,19 +133,17 @@ const bgBGGrid = {
135
133
  groupColumn: name => `Групирай по ${name}`,
136
134
  unGroupColumn: name => `Спри групиране по ${name}`,
137
135
  // Master/detail
138
- // detailPanelToggle: 'Detail panel toggle',
136
+ detailPanelToggle: 'Превключване на панела с детайли',
139
137
  expandDetailPanel: 'Разгъване',
140
138
  collapseDetailPanel: 'Свиване',
141
139
  // Row reordering text
142
- rowReorderingHeaderName: 'Подредба на редове'
143
-
140
+ rowReorderingHeaderName: 'Подредба на редове',
144
141
  // Aggregation
145
- // aggregationMenuItemHeader: 'Aggregation',
146
- // aggregationFunctionLabelSum: 'sum',
147
- // aggregationFunctionLabelAvg: 'avg',
148
- // aggregationFunctionLabelMin: 'min',
149
- // aggregationFunctionLabelMax: 'max',
150
- // aggregationFunctionLabelSize: 'size',
142
+ aggregationMenuItemHeader: 'Агрегиране',
143
+ aggregationFunctionLabelSum: 'сума',
144
+ aggregationFunctionLabelAvg: 'срст',
145
+ aggregationFunctionLabelMin: 'мин',
146
+ aggregationFunctionLabelMax: 'макс',
147
+ aggregationFunctionLabelSize: 'размер'
151
148
  };
152
-
153
149
  export const bgBG = getGridLocalization(bgBGGrid, bgBGCore);
@@ -124,8 +124,7 @@ const heILGrid = {
124
124
  // Column pinning text
125
125
  pinToLeft: 'נעץ משמאל',
126
126
  pinToRight: 'נעץ מימין',
127
- // unpin: 'Unpin',
128
-
127
+ unpin: 'הסר נעיצה',
129
128
  // Tree Data
130
129
  treeDataGroupingHeaderName: 'קבוצה',
131
130
  treeDataExpand: 'הרחב',
@@ -6,6 +6,7 @@ var GridCellEditStartReasons = /*#__PURE__*/function (GridCellEditStartReasons)
6
6
  GridCellEditStartReasons["cellDoubleClick"] = "cellDoubleClick";
7
7
  GridCellEditStartReasons["printableKeyDown"] = "printableKeyDown";
8
8
  GridCellEditStartReasons["deleteKeyDown"] = "deleteKeyDown";
9
+ GridCellEditStartReasons["pasteKeyDown"] = "pasteKeyDown";
9
10
  return GridCellEditStartReasons;
10
11
  }(GridCellEditStartReasons || {});
11
12
  /**
@@ -5,20 +5,6 @@ export function isOverflown(element) {
5
5
  export function findParentElementFromClassName(elem, className) {
6
6
  return elem.closest(`.${className}`);
7
7
  }
8
- export function getRowEl(cell) {
9
- if (!cell) {
10
- return null;
11
- }
12
- return findParentElementFromClassName(cell, gridClasses.row);
13
- }
14
-
15
- // TODO remove
16
- export function isGridCellRoot(elem) {
17
- return elem != null && elem.classList.contains(gridClasses.cell);
18
- }
19
- export function isGridHeaderCellRoot(elem) {
20
- return elem != null && elem.classList.contains(gridClasses.columnHeader);
21
- }
22
8
  function escapeOperandAttributeSelector(operand) {
23
9
  return operand.replace(/["\\]/g, '\\$&');
24
10
  }
@@ -51,4 +37,13 @@ export const getActiveElement = (root = document) => {
51
37
  return getActiveElement(activeEl.shadowRoot);
52
38
  }
53
39
  return activeEl;
54
- };
40
+ };
41
+ export function isEventTargetInPortal(event) {
42
+ if (
43
+ // The target is not an element when triggered by a Select inside the cell
44
+ // See https://github.com/mui/material-ui/issues/10534
45
+ event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
46
+ return true;
47
+ }
48
+ return false;
49
+ }