@mui/x-data-grid 6.7.0 → 6.8.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.
Files changed (153) hide show
  1. package/CHANGELOG.md +77 -15
  2. package/components/GridColumnHeaders.d.ts +2 -2
  3. package/components/GridColumnHeaders.js +3 -1
  4. package/components/GridRow.d.ts +2 -2
  5. package/components/GridRow.js +23 -69
  6. package/components/cell/GridCell.d.ts +24 -15
  7. package/components/cell/GridCell.js +422 -45
  8. package/components/cell/index.d.ts +2 -1
  9. package/components/cell/index.js +1 -1
  10. package/components/containers/GridRootStyles.js +30 -16
  11. package/components/menu/columnMenu/GridColumnHeaderMenu.js +1 -1
  12. package/components/toolbar/GridToolbar.js +2 -2
  13. package/components/virtualization/GridVirtualScroller.js +4 -9
  14. package/components/virtualization/GridVirtualScrollerContent.js +11 -20
  15. package/constants/defaultGridSlotsComponents.js +6 -2
  16. package/hooks/core/useGridApiInitialization.js +4 -1
  17. package/hooks/core/useGridStateInitialization.js +2 -9
  18. package/hooks/features/clipboard/useGridClipboard.js +1 -4
  19. package/hooks/features/columnHeaders/useGridColumnHeaders.js +9 -3
  20. package/hooks/features/editing/useGridCellEditing.js +5 -3
  21. package/hooks/features/editing/useGridRowEditing.js +14 -6
  22. package/hooks/features/filter/gridFilterUtils.d.ts +4 -1
  23. package/hooks/features/filter/gridFilterUtils.js +19 -13
  24. package/hooks/features/filter/useGridFilter.js +2 -1
  25. package/hooks/features/focus/useGridFocus.js +9 -4
  26. package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -3
  27. package/hooks/features/rows/useGridParamsApi.d.ts +2 -0
  28. package/hooks/features/rows/useGridParamsApi.js +7 -15
  29. package/hooks/features/virtualization/useGridVirtualScroller.d.ts +8 -816
  30. package/hooks/features/virtualization/useGridVirtualScroller.js +40 -38
  31. package/hooks/utils/index.d.ts +1 -1
  32. package/hooks/utils/index.js +1 -1
  33. package/hooks/utils/useGridSelector.d.ts +3 -1
  34. package/hooks/utils/useGridSelector.js +37 -6
  35. package/hooks/utils/useLazyRef.d.ts +2 -0
  36. package/hooks/utils/useLazyRef.js +9 -0
  37. package/hooks/utils/useOnMount.d.ts +2 -0
  38. package/hooks/utils/useOnMount.js +7 -0
  39. package/index.js +1 -1
  40. package/legacy/components/GridColumnHeaders.js +3 -1
  41. package/legacy/components/GridRow.js +25 -69
  42. package/legacy/components/cell/GridCell.js +425 -46
  43. package/legacy/components/cell/index.js +1 -1
  44. package/legacy/components/containers/GridRootStyles.js +20 -17
  45. package/legacy/components/menu/columnMenu/GridColumnHeaderMenu.js +1 -1
  46. package/legacy/components/toolbar/GridToolbar.js +2 -2
  47. package/legacy/components/virtualization/GridVirtualScroller.js +4 -7
  48. package/legacy/components/virtualization/GridVirtualScrollerContent.js +10 -17
  49. package/legacy/constants/defaultGridSlotsComponents.js +6 -2
  50. package/legacy/hooks/core/useGridApiInitialization.js +4 -1
  51. package/legacy/hooks/core/useGridStateInitialization.js +2 -7
  52. package/legacy/hooks/features/clipboard/useGridClipboard.js +1 -4
  53. package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js +9 -3
  54. package/legacy/hooks/features/editing/useGridCellEditing.js +5 -3
  55. package/legacy/hooks/features/editing/useGridRowEditing.js +15 -7
  56. package/legacy/hooks/features/filter/gridFilterUtils.js +23 -19
  57. package/legacy/hooks/features/filter/useGridFilter.js +2 -1
  58. package/legacy/hooks/features/focus/useGridFocus.js +9 -4
  59. package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -3
  60. package/legacy/hooks/features/rows/useGridParamsApi.js +23 -15
  61. package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +38 -34
  62. package/legacy/hooks/utils/index.js +1 -1
  63. package/legacy/hooks/utils/useGridSelector.js +43 -5
  64. package/legacy/hooks/utils/useLazyRef.js +9 -0
  65. package/legacy/hooks/utils/useOnMount.js +7 -0
  66. package/legacy/index.js +1 -1
  67. package/legacy/locales/elGR.js +70 -79
  68. package/legacy/utils/Store.js +34 -0
  69. package/legacy/utils/doesSupportPreventScroll.js +13 -0
  70. package/legacy/utils/fastMemo.js +5 -0
  71. package/legacy/utils/fastObjectShallowCompare.js +32 -0
  72. package/legacy/utils/keyboardUtils.js +4 -2
  73. package/locales/elGR.js +66 -79
  74. package/models/api/gridCoreApi.d.ts +6 -0
  75. package/models/colDef/gridColDef.d.ts +4 -3
  76. package/models/colDef/gridColType.d.ts +3 -1
  77. package/models/events/gridEventLookup.d.ts +3 -3
  78. package/modern/components/GridColumnHeaders.js +3 -1
  79. package/modern/components/GridRow.js +22 -69
  80. package/modern/components/cell/GridCell.js +421 -45
  81. package/modern/components/cell/index.js +1 -1
  82. package/modern/components/containers/GridRootStyles.js +30 -16
  83. package/modern/components/menu/columnMenu/GridColumnHeaderMenu.js +1 -1
  84. package/modern/components/toolbar/GridToolbar.js +2 -2
  85. package/modern/components/virtualization/GridVirtualScroller.js +4 -9
  86. package/modern/components/virtualization/GridVirtualScrollerContent.js +10 -20
  87. package/modern/constants/defaultGridSlotsComponents.js +6 -2
  88. package/modern/hooks/core/useGridApiInitialization.js +4 -1
  89. package/modern/hooks/core/useGridStateInitialization.js +2 -9
  90. package/modern/hooks/features/clipboard/useGridClipboard.js +1 -4
  91. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +9 -3
  92. package/modern/hooks/features/editing/useGridCellEditing.js +5 -3
  93. package/modern/hooks/features/editing/useGridRowEditing.js +14 -6
  94. package/modern/hooks/features/filter/gridFilterUtils.js +17 -12
  95. package/modern/hooks/features/filter/useGridFilter.js +2 -1
  96. package/modern/hooks/features/focus/useGridFocus.js +8 -4
  97. package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -3
  98. package/modern/hooks/features/rows/useGridParamsApi.js +7 -15
  99. package/modern/hooks/features/virtualization/useGridVirtualScroller.js +40 -38
  100. package/modern/hooks/utils/index.js +1 -1
  101. package/modern/hooks/utils/useGridSelector.js +37 -6
  102. package/modern/hooks/utils/useLazyRef.js +9 -0
  103. package/modern/hooks/utils/useOnMount.js +7 -0
  104. package/modern/index.js +1 -1
  105. package/modern/locales/elGR.js +66 -79
  106. package/modern/utils/Store.js +24 -0
  107. package/modern/utils/doesSupportPreventScroll.js +13 -0
  108. package/modern/utils/fastMemo.js +5 -0
  109. package/modern/utils/fastObjectShallowCompare.js +32 -0
  110. package/modern/utils/keyboardUtils.js +4 -2
  111. package/node/components/GridColumnHeaders.js +4 -2
  112. package/node/components/GridRow.js +22 -69
  113. package/node/components/cell/GridCell.js +424 -47
  114. package/node/components/cell/index.js +17 -10
  115. package/node/components/containers/GridRootStyles.js +30 -16
  116. package/node/components/menu/columnMenu/GridColumnHeaderMenu.js +1 -1
  117. package/node/components/toolbar/GridToolbar.js +2 -2
  118. package/node/components/virtualization/GridVirtualScroller.js +4 -9
  119. package/node/components/virtualization/GridVirtualScrollerContent.js +10 -20
  120. package/node/constants/defaultGridSlotsComponents.js +4 -1
  121. package/node/hooks/core/useGridApiInitialization.js +4 -1
  122. package/node/hooks/core/useGridStateInitialization.js +2 -9
  123. package/node/hooks/features/clipboard/useGridClipboard.js +1 -4
  124. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +8 -2
  125. package/node/hooks/features/editing/useGridCellEditing.js +5 -3
  126. package/node/hooks/features/editing/useGridRowEditing.js +14 -6
  127. package/node/hooks/features/filter/gridFilterUtils.js +17 -12
  128. package/node/hooks/features/filter/useGridFilter.js +2 -1
  129. package/node/hooks/features/focus/useGridFocus.js +8 -4
  130. package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js +2 -3
  131. package/node/hooks/features/rows/useGridParamsApi.js +9 -15
  132. package/node/hooks/features/virtualization/useGridVirtualScroller.js +40 -36
  133. package/node/hooks/utils/index.js +14 -10
  134. package/node/hooks/utils/useGridSelector.js +41 -7
  135. package/node/hooks/utils/useLazyRef.js +17 -0
  136. package/node/hooks/utils/useOnMount.js +15 -0
  137. package/node/index.js +1 -1
  138. package/node/locales/elGR.js +66 -79
  139. package/node/utils/Store.js +31 -0
  140. package/node/utils/doesSupportPreventScroll.js +19 -0
  141. package/node/utils/fastMemo.js +13 -0
  142. package/node/utils/fastObjectShallowCompare.js +38 -0
  143. package/node/utils/keyboardUtils.js +4 -2
  144. package/package.json +1 -1
  145. package/utils/Store.d.ts +11 -0
  146. package/utils/Store.js +24 -0
  147. package/utils/doesSupportPreventScroll.d.ts +1 -0
  148. package/utils/doesSupportPreventScroll.js +13 -0
  149. package/utils/fastMemo.d.ts +1 -0
  150. package/utils/fastMemo.js +5 -0
  151. package/utils/fastObjectShallowCompare.d.ts +1 -0
  152. package/utils/fastObjectShallowCompare.js +32 -0
  153. package/utils/keyboardUtils.js +4 -2
@@ -4,36 +4,54 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.GridCell = void 0;
7
+ exports.GridCellWrapper = exports.GridCellV7 = exports.GridCell = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _clsx = _interopRequireDefault(require("clsx"));
13
13
  var _utils = require("@mui/utils");
14
+ var _fastMemo = require("../../utils/fastMemo");
15
+ var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
14
16
  var _gridClasses = require("../../constants/gridClasses");
15
17
  var _models = require("../../models");
18
+ var _useGridSelector = require("../../hooks/utils/useGridSelector");
16
19
  var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
17
20
  var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
18
21
  var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
22
+ var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
19
23
  var _jsxRuntime = require("react/jsx-runtime");
20
- const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"];
24
+ const _excluded = ["changeReason", "unstable_updateValueOnRender"],
25
+ _excluded2 = ["align", "children", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
26
+ _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
27
+ _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
21
28
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
22
29
  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); }
23
30
  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; }
24
- // Based on https://stackoverflow.com/a/59518678
25
- let cachedSupportsPreventScroll;
26
- function doesSupportPreventScroll() {
27
- if (cachedSupportsPreventScroll === undefined) {
28
- document.createElement('div').focus({
29
- get preventScroll() {
30
- cachedSupportsPreventScroll = true;
31
- return false;
32
- }
33
- });
34
- }
35
- return cachedSupportsPreventScroll;
36
- }
31
+ const EMPTY_CELL_PARAMS = {
32
+ id: -1,
33
+ field: '__unset__',
34
+ row: {},
35
+ rowNode: {
36
+ id: -1,
37
+ depth: 0,
38
+ type: 'leaf',
39
+ parent: -1,
40
+ groupingKey: null
41
+ },
42
+ colDef: {
43
+ type: 'string',
44
+ field: '__unset__',
45
+ computedWidth: 0
46
+ },
47
+ cellMode: _models.GridCellModes.View,
48
+ hasFocus: false,
49
+ tabIndex: -1,
50
+ value: null,
51
+ formattedValue: '__unset__',
52
+ isEditable: false,
53
+ api: {}
54
+ };
37
55
  const useUtilityClasses = ownerState => {
38
56
  const {
39
57
  align,
@@ -49,11 +67,109 @@ const useUtilityClasses = ownerState => {
49
67
  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
50
68
  };
51
69
  let warnedOnce = false;
70
+
71
+ // GridCellWrapper is a compatibility layer for the V6 cell slot. If we can use the more efficient
72
+ // `GridCellV7`, we should. That component is a merge of `GridCellWrapper` and `GridCell`.
73
+ // TODO(v7): Remove the wrapper & cellV6 and use the cellV7 exclusively.
74
+ // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
75
+ const GridCellWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
76
+ const {
77
+ column,
78
+ rowId,
79
+ editCellState
80
+ } = props;
81
+ const apiRef = (0, _useGridApiContext.useGridApiContext)();
82
+ const rootProps = (0, _useGridRootProps.useGridRootProps)();
83
+ const field = column.field;
84
+ const cellParamsWithAPI = (0, _useGridSelector.useGridSelector)(apiRef, () => {
85
+ // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
86
+ // associated with `rowId`/`fieldId`, but this selector runs after the state has been
87
+ // updated, while `rowId`/`fieldId` reference an entry in the old state.
88
+ try {
89
+ const cellParams = apiRef.current.getCellParams(rowId, field);
90
+ const result = cellParams;
91
+ result.api = apiRef.current;
92
+ return result;
93
+ } catch (e) {
94
+ if (e instanceof _useGridParamsApi.MissingRowIdError) {
95
+ return EMPTY_CELL_PARAMS;
96
+ }
97
+ throw e;
98
+ }
99
+ }, _useGridSelector.objectShallowCompare);
100
+ const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
101
+ id: rowId,
102
+ field
103
+ }));
104
+ if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
105
+ return null;
106
+ }
107
+ const {
108
+ cellMode,
109
+ hasFocus,
110
+ isEditable,
111
+ value,
112
+ formattedValue
113
+ } = cellParamsWithAPI;
114
+ const managesOwnFocus = column.type === 'actions';
115
+ const tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
116
+ const {
117
+ classes: rootClasses,
118
+ getCellClassName
119
+ } = rootProps;
120
+ const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
121
+ id: rowId,
122
+ field
123
+ });
124
+ if (column.cellClassName) {
125
+ classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
126
+ }
127
+ if (getCellClassName) {
128
+ classNames.push(getCellClassName(cellParamsWithAPI));
129
+ }
130
+ let children;
131
+ if (editCellState == null && column.renderCell) {
132
+ children = column.renderCell(cellParamsWithAPI);
133
+ classNames.push(_gridClasses.gridClasses['cell--withRenderer']);
134
+ classNames.push(rootClasses?.['cell--withRenderer']);
135
+ }
136
+ if (editCellState != null && column.renderEditCell) {
137
+ const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
138
+
139
+ // eslint-disable-next-line @typescript-eslint/naming-convention
140
+ const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded);
141
+ const params = (0, _extends2.default)({}, cellParamsWithAPI, {
142
+ row: updatedRow
143
+ }, editCellStateRest);
144
+ children = column.renderEditCell(params);
145
+ classNames.push(_gridClasses.gridClasses['cell--editing']);
146
+ classNames.push(rootClasses?.['cell--editing']);
147
+ }
148
+ const {
149
+ slots
150
+ } = rootProps;
151
+ const CellComponent = slots.cell;
152
+ const cellProps = (0, _extends2.default)({}, props, {
153
+ ref,
154
+ field,
155
+ formattedValue,
156
+ hasFocus,
157
+ isEditable,
158
+ isSelected,
159
+ value,
160
+ cellMode,
161
+ children,
162
+ tabIndex,
163
+ className: (0, _clsx.default)(classNames)
164
+ });
165
+ return /*#__PURE__*/React.createElement(CellComponent, cellProps);
166
+ });
52
167
  const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
53
168
  const {
54
169
  align,
55
- children,
170
+ children: childrenProp,
56
171
  colIndex,
172
+ column,
57
173
  cellMode,
58
174
  field,
59
175
  formattedValue,
@@ -79,7 +195,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
79
195
  onDragEnter,
80
196
  onDragOver
81
197
  } = props,
82
- other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
198
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
83
199
  const valueToRender = formattedValue == null ? value : formattedValue;
84
200
  const cellRef = React.useRef(null);
85
201
  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
@@ -134,7 +250,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
134
250
  if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
135
251
  const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
136
252
  const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
137
- if (doesSupportPreventScroll()) {
253
+ if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
138
254
  elementToFocus.focus({
139
255
  preventScroll: true
140
256
  });
@@ -161,24 +277,21 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
161
277
  }
162
278
  };
163
279
  }
164
- const column = apiRef.current.getColumn(field);
165
280
  const managesOwnFocus = column.type === 'actions';
166
- const renderChildren = () => {
167
- if (children === undefined) {
168
- const valueString = valueToRender?.toString();
169
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
170
- className: classes.content,
171
- title: valueString,
172
- children: valueString
173
- });
174
- }
175
- if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
176
- return /*#__PURE__*/React.cloneElement(children, {
177
- focusElementRef
178
- });
179
- }
180
- return children;
181
- };
281
+ let children = childrenProp;
282
+ if (children === undefined) {
283
+ const valueString = valueToRender?.toString();
284
+ children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
285
+ className: classes.content,
286
+ title: valueString,
287
+ children: valueString
288
+ });
289
+ }
290
+ if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
291
+ children = /*#__PURE__*/React.cloneElement(children, {
292
+ focusElementRef
293
+ });
294
+ }
182
295
  const draggableEventHandlers = disableDragEvents ? null : {
183
296
  onDragEnter: publish('cellDragEnter', onDragEnter),
184
297
  onDragOver: publish('cellDragOver', onDragOver)
@@ -192,7 +305,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
192
305
  "aria-colindex": colIndex + 1,
193
306
  "aria-colspan": colSpan,
194
307
  style: style,
195
- tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
308
+ tabIndex: tabIndex,
196
309
  onClick: publish('cellClick', onClick),
197
310
  onDoubleClick: publish('cellDoubleClick', onDoubleClick),
198
311
  onMouseOver: publish('cellMouseOver', onMouseOver),
@@ -202,11 +315,35 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
202
315
  onKeyUp: publish('cellKeyUp', onKeyUp)
203
316
  }, draggableEventHandlers, other, {
204
317
  onFocus: handleFocus,
205
- children: renderChildren()
318
+ children: children
206
319
  }));
207
320
  });
208
- const MemoizedCell = /*#__PURE__*/React.memo(GridCell);
209
- exports.GridCell = MemoizedCell;
321
+ exports.GridCell = GridCell;
322
+ const MemoizedCellWrapper = (0, _fastMemo.fastMemo)(GridCellWrapper);
323
+ exports.GridCellWrapper = MemoizedCellWrapper;
324
+ process.env.NODE_ENV !== "production" ? GridCellWrapper.propTypes = {
325
+ // ----------------------------- Warning --------------------------------
326
+ // | These PropTypes are generated from the TypeScript type definitions |
327
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
328
+ // ----------------------------------------------------------------------
329
+ align: _propTypes.default.oneOf(['center', 'left', 'right']),
330
+ className: _propTypes.default.string,
331
+ colIndex: _propTypes.default.number,
332
+ colSpan: _propTypes.default.number,
333
+ column: _propTypes.default.object,
334
+ disableDragEvents: _propTypes.default.bool,
335
+ height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
336
+ onClick: _propTypes.default.func,
337
+ onDoubleClick: _propTypes.default.func,
338
+ onDragEnter: _propTypes.default.func,
339
+ onDragOver: _propTypes.default.func,
340
+ onKeyDown: _propTypes.default.func,
341
+ onMouseDown: _propTypes.default.func,
342
+ onMouseUp: _propTypes.default.func,
343
+ rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
344
+ showRightBorder: _propTypes.default.bool,
345
+ width: _propTypes.default.number
346
+ } : void 0;
210
347
  process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
211
348
  // ----------------------------- Warning --------------------------------
212
349
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -218,13 +355,253 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
218
355
  className: _propTypes.default.string,
219
356
  colIndex: _propTypes.default.number,
220
357
  colSpan: _propTypes.default.number,
358
+ column: _propTypes.default.object,
359
+ disableDragEvents: _propTypes.default.bool,
360
+ editCellState: _propTypes.default.shape({
361
+ changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
362
+ isProcessingProps: _propTypes.default.bool,
363
+ isValidating: _propTypes.default.bool,
364
+ value: _propTypes.default.any
365
+ }),
366
+ height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
367
+ onClick: _propTypes.default.func,
368
+ onDoubleClick: _propTypes.default.func,
369
+ onDragEnter: _propTypes.default.func,
370
+ onDragOver: _propTypes.default.func,
371
+ onKeyDown: _propTypes.default.func,
372
+ onMouseDown: _propTypes.default.func,
373
+ onMouseUp: _propTypes.default.func,
374
+ rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
375
+ showRightBorder: _propTypes.default.bool,
376
+ width: _propTypes.default.number
377
+ } : void 0;
378
+ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
379
+ const {
380
+ column,
381
+ rowId,
382
+ editCellState,
383
+ align,
384
+ colIndex,
385
+ height,
386
+ width,
387
+ className,
388
+ showRightBorder,
389
+ colSpan,
390
+ disableDragEvents,
391
+ onClick,
392
+ onDoubleClick,
393
+ onMouseDown,
394
+ onMouseUp,
395
+ onMouseOver,
396
+ onKeyDown,
397
+ onKeyUp,
398
+ onDragEnter,
399
+ onDragOver
400
+ } = props,
401
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
402
+ const apiRef = (0, _useGridApiContext.useGridApiContext)();
403
+ const rootProps = (0, _useGridRootProps.useGridRootProps)();
404
+ const field = column.field;
405
+ const cellParamsWithAPI = (0, _useGridSelector.useGridSelector)(apiRef, () => {
406
+ // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
407
+ // associated with `rowId`/`fieldId`, but this selector runs after the state has been
408
+ // updated, while `rowId`/`fieldId` reference an entry in the old state.
409
+ try {
410
+ const cellParams = apiRef.current.getCellParams(rowId, field);
411
+ const result = cellParams;
412
+ result.api = apiRef.current;
413
+ return result;
414
+ } catch (e) {
415
+ if (e instanceof _useGridParamsApi.MissingRowIdError) {
416
+ return EMPTY_CELL_PARAMS;
417
+ }
418
+ throw e;
419
+ }
420
+ }, _useGridSelector.objectShallowCompare);
421
+ const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
422
+ id: rowId,
423
+ field
424
+ }));
425
+ const {
426
+ cellMode,
427
+ hasFocus,
428
+ isEditable,
429
+ value,
430
+ formattedValue
431
+ } = cellParamsWithAPI;
432
+ const managesOwnFocus = column.type === 'actions';
433
+ const tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
434
+ const {
435
+ classes: rootClasses,
436
+ getCellClassName
437
+ } = rootProps;
438
+ const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
439
+ id: rowId,
440
+ field
441
+ });
442
+ if (column.cellClassName) {
443
+ classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
444
+ }
445
+ if (getCellClassName) {
446
+ classNames.push(getCellClassName(cellParamsWithAPI));
447
+ }
448
+ const valueToRender = formattedValue == null ? value : formattedValue;
449
+ const cellRef = React.useRef(null);
450
+ const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
451
+ const focusElementRef = React.useRef(null);
452
+ const ownerState = {
453
+ align,
454
+ showRightBorder,
455
+ isEditable,
456
+ classes: rootProps.classes,
457
+ isSelected
458
+ };
459
+ const classes = useUtilityClasses(ownerState);
460
+ const publishMouseUp = React.useCallback(eventName => event => {
461
+ const params = apiRef.current.getCellParams(rowId, field || '');
462
+ apiRef.current.publishEvent(eventName, params, event);
463
+ if (onMouseUp) {
464
+ onMouseUp(event);
465
+ }
466
+ }, [apiRef, field, onMouseUp, rowId]);
467
+ const publishMouseDown = React.useCallback(eventName => event => {
468
+ const params = apiRef.current.getCellParams(rowId, field || '');
469
+ apiRef.current.publishEvent(eventName, params, event);
470
+ if (onMouseDown) {
471
+ onMouseDown(event);
472
+ }
473
+ }, [apiRef, field, onMouseDown, rowId]);
474
+ const publish = React.useCallback((eventName, propHandler) => event => {
475
+ // The row might have been deleted during the click
476
+ if (!apiRef.current.getRow(rowId)) {
477
+ return;
478
+ }
479
+ const params = apiRef.current.getCellParams(rowId, field || '');
480
+ apiRef.current.publishEvent(eventName, params, event);
481
+ if (propHandler) {
482
+ propHandler(event);
483
+ }
484
+ }, [apiRef, field, rowId]);
485
+ const style = {
486
+ minWidth: width,
487
+ maxWidth: width,
488
+ minHeight: height,
489
+ maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
490
+ };
491
+
492
+ React.useEffect(() => {
493
+ if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
494
+ return;
495
+ }
496
+ const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
497
+ if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
498
+ const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
499
+ const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
500
+ if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
501
+ elementToFocus.focus({
502
+ preventScroll: true
503
+ });
504
+ } else {
505
+ const scrollPosition = apiRef.current.getScrollPosition();
506
+ elementToFocus.focus();
507
+ apiRef.current.scroll(scrollPosition);
508
+ }
509
+ }
510
+ }, [hasFocus, cellMode, apiRef]);
511
+ if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
512
+ return null;
513
+ }
514
+ let handleFocus = other.onFocus;
515
+ if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
516
+ handleFocus = event => {
517
+ const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
518
+ if (focusedCell?.id === rowId && focusedCell.field === field) {
519
+ if (typeof other.onFocus === 'function') {
520
+ other.onFocus(event);
521
+ }
522
+ return;
523
+ }
524
+ if (!warnedOnce) {
525
+ console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell?.id}, field=${focusedCell?.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
526
+ warnedOnce = true;
527
+ }
528
+ };
529
+ }
530
+ let children;
531
+ if (editCellState == null && column.renderCell) {
532
+ children = column.renderCell(cellParamsWithAPI);
533
+ classNames.push(_gridClasses.gridClasses['cell--withRenderer']);
534
+ classNames.push(rootClasses?.['cell--withRenderer']);
535
+ }
536
+ if (editCellState != null && column.renderEditCell) {
537
+ const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
538
+
539
+ // eslint-disable-next-line @typescript-eslint/naming-convention
540
+ const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded4);
541
+ const params = (0, _extends2.default)({}, cellParamsWithAPI, {
542
+ row: updatedRow
543
+ }, editCellStateRest);
544
+ children = column.renderEditCell(params);
545
+ classNames.push(_gridClasses.gridClasses['cell--editing']);
546
+ classNames.push(rootClasses?.['cell--editing']);
547
+ }
548
+ if (children === undefined) {
549
+ const valueString = valueToRender?.toString();
550
+ children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
551
+ className: classes.content,
552
+ title: valueString,
553
+ children: valueString
554
+ });
555
+ }
556
+ if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
557
+ children = /*#__PURE__*/React.cloneElement(children, {
558
+ focusElementRef
559
+ });
560
+ }
561
+ const draggableEventHandlers = disableDragEvents ? null : {
562
+ onDragEnter: publish('cellDragEnter', onDragEnter),
563
+ onDragOver: publish('cellDragOver', onDragOver)
564
+ };
565
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
566
+ ref: handleRef,
567
+ className: (0, _clsx.default)(className, classNames, classes.root),
568
+ role: "cell",
569
+ "data-field": field,
570
+ "data-colindex": colIndex,
571
+ "aria-colindex": colIndex + 1,
572
+ "aria-colspan": colSpan,
573
+ style: style,
574
+ tabIndex: tabIndex,
575
+ onClick: publish('cellClick', onClick),
576
+ onDoubleClick: publish('cellDoubleClick', onDoubleClick),
577
+ onMouseOver: publish('cellMouseOver', onMouseOver),
578
+ onMouseDown: publishMouseDown('cellMouseDown'),
579
+ onMouseUp: publishMouseUp('cellMouseUp'),
580
+ onKeyDown: publish('cellKeyDown', onKeyDown),
581
+ onKeyUp: publish('cellKeyUp', onKeyUp)
582
+ }, draggableEventHandlers, other, {
583
+ onFocus: handleFocus,
584
+ children: children
585
+ }));
586
+ });
587
+ process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
588
+ // ----------------------------- Warning --------------------------------
589
+ // | These PropTypes are generated from the TypeScript type definitions |
590
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
591
+ // ----------------------------------------------------------------------
592
+ align: _propTypes.default.oneOf(['center', 'left', 'right']),
593
+ className: _propTypes.default.string,
594
+ colIndex: _propTypes.default.number,
595
+ colSpan: _propTypes.default.number,
596
+ column: _propTypes.default.object,
221
597
  disableDragEvents: _propTypes.default.bool,
222
- field: _propTypes.default.string,
223
- formattedValue: _propTypes.default.any,
224
- hasFocus: _propTypes.default.bool,
598
+ editCellState: _propTypes.default.shape({
599
+ changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
600
+ isProcessingProps: _propTypes.default.bool,
601
+ isValidating: _propTypes.default.bool,
602
+ value: _propTypes.default.any
603
+ }),
225
604
  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
226
- isEditable: _propTypes.default.bool,
227
- isSelected: _propTypes.default.bool,
228
605
  onClick: _propTypes.default.func,
229
606
  onDoubleClick: _propTypes.default.func,
230
607
  onDragEnter: _propTypes.default.func,
@@ -234,7 +611,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
234
611
  onMouseUp: _propTypes.default.func,
235
612
  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
236
613
  showRightBorder: _propTypes.default.bool,
237
- tabIndex: _propTypes.default.oneOf([-1, 0]),
238
- value: _propTypes.default.any,
239
614
  width: _propTypes.default.number
240
- } : void 0;
615
+ } : void 0;
616
+ const MemoizedGridCellV7 = (0, _fastMemo.fastMemo)(GridCellV7);
617
+ exports.GridCellV7 = MemoizedGridCellV7;
@@ -3,20 +3,20 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- var _GridCell = require("./GridCell");
7
- Object.keys(_GridCell).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _GridCell[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function () {
13
- return _GridCell[key];
14
- }
15
- });
6
+ var _exportNames = {
7
+ GridCell: true
8
+ };
9
+ Object.defineProperty(exports, "GridCell", {
10
+ enumerable: true,
11
+ get: function () {
12
+ return _GridCell.GridCell;
13
+ }
16
14
  });
15
+ var _GridCell = require("./GridCell");
17
16
  var _GridBooleanCell = require("./GridBooleanCell");
18
17
  Object.keys(_GridBooleanCell).forEach(function (key) {
19
18
  if (key === "default" || key === "__esModule") return;
19
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
20
20
  if (key in exports && exports[key] === _GridBooleanCell[key]) return;
21
21
  Object.defineProperty(exports, key, {
22
22
  enumerable: true,
@@ -28,6 +28,7 @@ Object.keys(_GridBooleanCell).forEach(function (key) {
28
28
  var _GridEditBooleanCell = require("./GridEditBooleanCell");
29
29
  Object.keys(_GridEditBooleanCell).forEach(function (key) {
30
30
  if (key === "default" || key === "__esModule") return;
31
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
31
32
  if (key in exports && exports[key] === _GridEditBooleanCell[key]) return;
32
33
  Object.defineProperty(exports, key, {
33
34
  enumerable: true,
@@ -39,6 +40,7 @@ Object.keys(_GridEditBooleanCell).forEach(function (key) {
39
40
  var _GridEditDateCell = require("./GridEditDateCell");
40
41
  Object.keys(_GridEditDateCell).forEach(function (key) {
41
42
  if (key === "default" || key === "__esModule") return;
43
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
42
44
  if (key in exports && exports[key] === _GridEditDateCell[key]) return;
43
45
  Object.defineProperty(exports, key, {
44
46
  enumerable: true,
@@ -50,6 +52,7 @@ Object.keys(_GridEditDateCell).forEach(function (key) {
50
52
  var _GridEditInputCell = require("./GridEditInputCell");
51
53
  Object.keys(_GridEditInputCell).forEach(function (key) {
52
54
  if (key === "default" || key === "__esModule") return;
55
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
53
56
  if (key in exports && exports[key] === _GridEditInputCell[key]) return;
54
57
  Object.defineProperty(exports, key, {
55
58
  enumerable: true,
@@ -61,6 +64,7 @@ Object.keys(_GridEditInputCell).forEach(function (key) {
61
64
  var _GridEditSingleSelectCell = require("./GridEditSingleSelectCell");
62
65
  Object.keys(_GridEditSingleSelectCell).forEach(function (key) {
63
66
  if (key === "default" || key === "__esModule") return;
67
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
64
68
  if (key in exports && exports[key] === _GridEditSingleSelectCell[key]) return;
65
69
  Object.defineProperty(exports, key, {
66
70
  enumerable: true,
@@ -72,6 +76,7 @@ Object.keys(_GridEditSingleSelectCell).forEach(function (key) {
72
76
  var _GridActionsCell = require("./GridActionsCell");
73
77
  Object.keys(_GridActionsCell).forEach(function (key) {
74
78
  if (key === "default" || key === "__esModule") return;
79
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
75
80
  if (key in exports && exports[key] === _GridActionsCell[key]) return;
76
81
  Object.defineProperty(exports, key, {
77
82
  enumerable: true,
@@ -83,6 +88,7 @@ Object.keys(_GridActionsCell).forEach(function (key) {
83
88
  var _GridActionsCellItem = require("./GridActionsCellItem");
84
89
  Object.keys(_GridActionsCellItem).forEach(function (key) {
85
90
  if (key === "default" || key === "__esModule") return;
91
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
86
92
  if (key in exports && exports[key] === _GridActionsCellItem[key]) return;
87
93
  Object.defineProperty(exports, key, {
88
94
  enumerable: true,
@@ -94,6 +100,7 @@ Object.keys(_GridActionsCellItem).forEach(function (key) {
94
100
  var _GridSkeletonCell = require("./GridSkeletonCell");
95
101
  Object.keys(_GridSkeletonCell).forEach(function (key) {
96
102
  if (key === "default" || key === "__esModule") return;
103
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
97
104
  if (key in exports && exports[key] === _GridSkeletonCell[key]) return;
98
105
  Object.defineProperty(exports, key, {
99
106
  enumerable: true,