@mui/x-data-grid 8.10.1 → 8.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.
Files changed (88) hide show
  1. package/CHANGELOG.md +221 -8
  2. package/DataGrid/DataGrid.js +4 -2
  3. package/DataGrid/useDataGridComponent.d.ts +2 -1
  4. package/DataGrid/useDataGridComponent.js +2 -2
  5. package/colDef/gridDateColDef.js +7 -0
  6. package/components/GridColumnSortButton.js +1 -2
  7. package/components/GridColumnUnsortedIcon.d.ts +2 -3
  8. package/components/GridRow.js +11 -5
  9. package/components/cell/GridActionsCell.js +8 -4
  10. package/components/columnHeaders/GridColumnGroupHeader.js +13 -1
  11. package/components/columnHeaders/GridColumnHeaderItem.js +17 -4
  12. package/components/columnHeaders/GridGenericColumnHeaderItem.js +0 -14
  13. package/components/columnsManagement/GridColumnsManagement.js +7 -2
  14. package/components/containers/GridRootStyles.js +24 -6
  15. package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +3 -2
  16. package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts +1 -1
  17. package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js +6 -9
  18. package/components/panel/filterPanel/GridFilterInputSingleSelect.js +4 -10
  19. package/components/virtualization/GridVirtualScrollerRenderZone.js +3 -10
  20. package/esm/DataGrid/DataGrid.js +4 -2
  21. package/esm/DataGrid/useDataGridComponent.d.ts +2 -1
  22. package/esm/DataGrid/useDataGridComponent.js +2 -2
  23. package/esm/colDef/gridDateColDef.js +7 -0
  24. package/esm/components/GridColumnSortButton.js +1 -2
  25. package/esm/components/GridColumnUnsortedIcon.d.ts +2 -3
  26. package/esm/components/GridRow.js +12 -6
  27. package/esm/components/cell/GridActionsCell.js +8 -4
  28. package/esm/components/columnHeaders/GridColumnGroupHeader.js +13 -1
  29. package/esm/components/columnHeaders/GridColumnHeaderItem.js +17 -4
  30. package/esm/components/columnHeaders/GridGenericColumnHeaderItem.js +0 -14
  31. package/esm/components/columnsManagement/GridColumnsManagement.js +6 -1
  32. package/esm/components/containers/GridRootStyles.js +24 -6
  33. package/esm/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +3 -2
  34. package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts +1 -1
  35. package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js +6 -9
  36. package/esm/components/panel/filterPanel/GridFilterInputSingleSelect.js +4 -10
  37. package/esm/components/virtualization/GridVirtualScrollerRenderZone.js +3 -10
  38. package/esm/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts +15 -0
  39. package/esm/hooks/features/editing/useGridCellEditing.js +1 -1
  40. package/esm/hooks/features/editing/useGridRowEditing.js +1 -1
  41. package/esm/hooks/features/filter/gridFilterSelector.d.ts +9 -1
  42. package/esm/hooks/features/filter/gridFilterSelector.js +12 -0
  43. package/esm/hooks/features/filter/gridFilterUtils.js +11 -2
  44. package/esm/hooks/features/pagination/useGridPaginationModel.js +2 -2
  45. package/esm/hooks/features/rows/useGridRows.d.ts +2 -1
  46. package/esm/hooks/features/rows/useGridRows.js +6 -34
  47. package/esm/hooks/features/rows/useGridRowsOverridableMethods.d.ts +6 -0
  48. package/esm/hooks/features/rows/useGridRowsOverridableMethods.js +43 -0
  49. package/esm/hooks/features/scroll/useGridScroll.js +1 -1
  50. package/esm/hooks/utils/useGridConfiguration.d.ts +3 -1
  51. package/esm/index.js +1 -1
  52. package/esm/internals/index.d.ts +2 -1
  53. package/esm/internals/index.js +2 -1
  54. package/esm/locales/fiFI.js +6 -6
  55. package/esm/material/index.js +2 -0
  56. package/esm/models/api/gridParamsApi.d.ts +3 -3
  57. package/esm/models/colDef/gridColDef.d.ts +4 -2
  58. package/esm/models/configuration/gridConfiguration.d.ts +6 -4
  59. package/esm/models/configuration/gridRowConfiguration.d.ts +11 -1
  60. package/esm/models/gridIconSlotsComponent.d.ts +6 -0
  61. package/esm/models/props/DataGridProps.d.ts +1 -1
  62. package/esm/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js +0 -2
  63. package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts +15 -0
  64. package/hooks/features/editing/useGridCellEditing.js +1 -1
  65. package/hooks/features/editing/useGridRowEditing.js +1 -1
  66. package/hooks/features/filter/gridFilterSelector.d.ts +9 -1
  67. package/hooks/features/filter/gridFilterSelector.js +13 -1
  68. package/hooks/features/filter/gridFilterUtils.js +10 -1
  69. package/hooks/features/pagination/useGridPaginationModel.js +2 -2
  70. package/hooks/features/rows/useGridRows.d.ts +2 -1
  71. package/hooks/features/rows/useGridRows.js +6 -34
  72. package/hooks/features/rows/useGridRowsOverridableMethods.d.ts +6 -0
  73. package/hooks/features/rows/useGridRowsOverridableMethods.js +52 -0
  74. package/hooks/features/scroll/useGridScroll.js +1 -1
  75. package/hooks/utils/useGridConfiguration.d.ts +3 -1
  76. package/index.js +1 -1
  77. package/internals/index.d.ts +2 -1
  78. package/internals/index.js +15 -0
  79. package/locales/fiFI.js +6 -6
  80. package/material/index.js +2 -0
  81. package/models/api/gridParamsApi.d.ts +3 -3
  82. package/models/colDef/gridColDef.d.ts +4 -2
  83. package/models/configuration/gridConfiguration.d.ts +6 -4
  84. package/models/configuration/gridRowConfiguration.d.ts +11 -1
  85. package/models/gridIconSlotsComponent.d.ts +6 -0
  86. package/models/props/DataGridProps.d.ts +1 -1
  87. package/package.json +3 -3
  88. package/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js +0 -2
@@ -19,15 +19,9 @@ function GridFilterInputMultipleSingleSelect(props) {
19
19
  other = _objectWithoutPropertiesLoose(props, _excluded);
20
20
  const id = useId();
21
21
  const rootProps = useGridRootProps();
22
- let resolvedColumn = null;
23
- if (item.field) {
24
- const column = apiRef.current.getColumn(item.field);
25
- if (isSingleSelectColDef(column)) {
26
- resolvedColumn = column;
27
- }
28
- }
29
- const getOptionValue = resolvedColumn?.getOptionValue;
30
- const getOptionLabel = resolvedColumn?.getOptionLabel;
22
+ const resolvedColumn = apiRef.current.getColumn(item.field);
23
+ const getOptionValue = resolvedColumn.getOptionValue;
24
+ const getOptionLabel = resolvedColumn.getOptionLabel;
31
25
  const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
32
26
  const resolvedValueOptions = React.useMemo(() => {
33
27
  return getValueOptions(resolvedColumn) || [];
@@ -52,6 +46,9 @@ function GridFilterInputMultipleSingleSelect(props) {
52
46
  value: value.map(getOptionValue)
53
47
  }));
54
48
  }, [applyValue, item, getOptionValue]);
49
+ if (!resolvedColumn || !isSingleSelectColDef(resolvedColumn)) {
50
+ return null;
51
+ }
55
52
  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
56
53
  return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
57
54
  multiple: true,
@@ -48,15 +48,9 @@ function GridFilterInputSingleSelect(props) {
48
48
  const labelId = useId();
49
49
  const rootProps = useGridRootProps();
50
50
  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
51
- let resolvedColumn = null;
52
- if (item.field) {
53
- const column = apiRef.current.getColumn(item.field);
54
- if (isSingleSelectColDef(column)) {
55
- resolvedColumn = column;
56
- }
57
- }
58
- const getOptionValue = resolvedColumn?.getOptionValue;
59
- const getOptionLabel = resolvedColumn?.getOptionLabel;
51
+ const resolvedColumn = apiRef.current.getColumn(item.field);
52
+ const getOptionValue = resolvedColumn.getOptionValue;
53
+ const getOptionLabel = resolvedColumn.getOptionLabel;
60
54
  const currentValueOptions = React.useMemo(() => {
61
55
  return getValueOptions(resolvedColumn);
62
56
  }, [resolvedColumn]);
@@ -69,7 +63,7 @@ function GridFilterInputSingleSelect(props) {
69
63
  value
70
64
  }));
71
65
  }, [currentValueOptions, getOptionValue, applyValue, item]);
72
- if (!isSingleSelectColDef(resolvedColumn)) {
66
+ if (!resolvedColumn || !isSingleSelectColDef(resolvedColumn)) {
73
67
  return null;
74
68
  }
75
69
  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
@@ -6,10 +6,7 @@ import clsx from 'clsx';
6
6
  import { styled } from '@mui/system';
7
7
  import composeClasses from '@mui/utils/composeClasses';
8
8
  import { forwardRef } from '@mui/x-internals/forwardRef';
9
- import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
10
- import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
11
- import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
12
- import { gridRenderContextSelector } from "../../hooks/features/virtualization/index.js";
9
+ import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
13
10
  import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
14
11
  import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
15
12
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,14 +33,10 @@ const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRen
36
33
  className
37
34
  } = props,
38
35
  other = _objectWithoutPropertiesLoose(props, _excluded);
39
- const apiRef = useGridApiContext();
36
+ const apiRef = useGridPrivateApiContext();
40
37
  const rootProps = useGridRootProps();
41
38
  const classes = useUtilityClasses(rootProps);
42
- const offsetTop = useGridSelector(apiRef, () => {
43
- const renderContext = gridRenderContextSelector(apiRef);
44
- const rowsMeta = gridRowsMetaSelector(apiRef);
45
- return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
46
- });
39
+ const offsetTop = apiRef.current.virtualizer.api.useVirtualization().getters.getOffsetTop();
47
40
  return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
48
41
  className: clsx(classes.root, className),
49
42
  ownerState: rootProps,
@@ -91,6 +91,21 @@ export interface GridPipeProcessingLookup {
91
91
  };
92
92
  context: boolean;
93
93
  };
94
+ /**
95
+ * Does validation of the current reorder operation.
96
+ * If the reorder is valid, it returns the position index of the drop indicator.
97
+ * - For example before first row is `0` and after the last row is `rows.length`.
98
+ * If the reorder is invalid, it returns `-1`.
99
+ */
100
+ getRowReorderTargetIndex: {
101
+ value: number;
102
+ context: {
103
+ sourceRowId: GridRowId;
104
+ targetRowId: GridRowId;
105
+ dropPosition: 'above' | 'below';
106
+ dragDirection: 'up' | 'down';
107
+ };
108
+ };
94
109
  }
95
110
  export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
96
111
  context: any;
@@ -365,7 +365,7 @@ export const useGridCellEditing = (apiRef, props) => {
365
365
  if (onProcessRowUpdateError) {
366
366
  onProcessRowUpdateError(errorThrown);
367
367
  } else if (process.env.NODE_ENV !== 'production') {
368
- warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
368
+ warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
369
369
  }
370
370
  };
371
371
  try {
@@ -449,7 +449,7 @@ export const useGridRowEditing = (apiRef, props) => {
449
449
  if (onProcessRowUpdateError) {
450
450
  onProcessRowUpdateError(errorThrown);
451
451
  } else if (process.env.NODE_ENV !== 'production') {
452
- warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
452
+ warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
453
453
  }
454
454
  };
455
455
  try {
@@ -134,4 +134,12 @@ export type GridFilterActiveItemsLookup = {
134
134
  */
135
135
  export declare const gridFilterActiveItemsLookupSelector: (args_0: import("react").RefObject<{
136
136
  state: GridStateCommunity;
137
- } | null>) => GridFilterActiveItemsLookup;
137
+ } | null>) => GridFilterActiveItemsLookup;
138
+ /**
139
+ * Get the index lookup for expanded (visible) rows only.
140
+ * Does not include collapsed children.
141
+ * @ignore - do not document.
142
+ */
143
+ export declare const gridExpandedSortedRowIndexLookupSelector: (args_0: import("react").RefObject<{
144
+ state: GridStateCommunity;
145
+ } | null>) => Record<GridRowId, number>;
@@ -174,4 +174,16 @@ export const gridFilterActiveItemsLookupSelector = createSelectorMemoized(gridFi
174
174
  return res;
175
175
  }, {});
176
176
  return result;
177
+ });
178
+
179
+ /**
180
+ * Get the index lookup for expanded (visible) rows only.
181
+ * Does not include collapsed children.
182
+ * @ignore - do not document.
183
+ */
184
+ export const gridExpandedSortedRowIndexLookupSelector = createSelectorMemoized(gridExpandedSortedRowIdsSelector, expandedSortedIds => {
185
+ return expandedSortedIds.reduce((acc, id, index) => {
186
+ acc[id] = index;
187
+ return acc;
188
+ }, Object.create(null));
177
189
  });
@@ -3,7 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
3
3
  import { GridLogicOperator } from "../../../models/index.js";
4
4
  import { getDefaultGridFilterModel } from "./gridFilterState.js";
5
5
  import { getPublicApiRef } from "../../../utils/getPublicApiRef.js";
6
- import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
6
+ import { gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnVisibilityModelSelector } from "../columns/index.js";
7
7
  let hasEval;
8
8
  function getHasEval() {
9
9
  if (hasEval !== undefined) {
@@ -191,7 +191,16 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
191
191
  if (quickFilterValues.length === 0) {
192
192
  return null;
193
193
  }
194
- const columnFields = shouldQuickFilterExcludeHiddenColumns(filterModel) ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
194
+ const allColumnFields = gridColumnFieldsSelector(apiRef);
195
+ const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
196
+ let columnFields;
197
+ if (shouldQuickFilterExcludeHiddenColumns(filterModel)) {
198
+ // Do not use gridVisibleColumnFieldsSelector here, because quick filter won't work in the list view mode
199
+ // See https://github.com/mui/mui-x/issues/19145
200
+ columnFields = allColumnFields.filter(field => columnVisibilityModel[field] !== false);
201
+ } else {
202
+ columnFields = allColumnFields;
203
+ }
195
204
  const appliersPerField = [];
196
205
  const {
197
206
  ignoreDiacritics
@@ -219,13 +219,13 @@ export const useGridPaginationModel = (apiRef, props) => {
219
219
  React.useEffect(() => {
220
220
  apiRef.current.setState(state => {
221
221
  const isEnabled = props.pagination === true;
222
- if (state.pagination.paginationMode === props.paginationMode || state.pagination.enabled === isEnabled) {
222
+ if (state.pagination.paginationMode === props.paginationMode && state.pagination.enabled === isEnabled) {
223
223
  return state;
224
224
  }
225
225
  return _extends({}, state, {
226
226
  pagination: _extends({}, state.pagination, {
227
227
  paginationMode: props.paginationMode,
228
- enabled: props.pagination === true
228
+ enabled: isEnabled
229
229
  })
230
230
  });
231
231
  });
@@ -2,5 +2,6 @@ import { RefObject } from '@mui/x-internals/types';
2
2
  import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
3
3
  import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
4
4
  import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
5
+ import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
5
6
  export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'dataSource' | 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
6
- export declare const useGridRows: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading" | "dataSource">) => void;
7
+ export declare const useGridRows: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading" | "dataSource" | "processRowUpdate" | "onProcessRowUpdateError">, configuration: GridConfiguration) => void;
@@ -36,7 +36,7 @@ export const rowsStateInitializer = (state, props, apiRef) => {
36
36
  })
37
37
  });
38
38
  };
39
- export const useGridRows = (apiRef, props) => {
39
+ export const useGridRows = (apiRef, props, configuration) => {
40
40
  if (process.env.NODE_ENV !== 'production') {
41
41
  try {
42
42
  // Freeze the `rows` prop so developers have a fast failure if they try to use Array.prototype.push().
@@ -49,6 +49,11 @@ export const useGridRows = (apiRef, props) => {
49
49
  const lastUpdateMs = React.useRef(Date.now());
50
50
  const lastRowCount = React.useRef(props.rowCount);
51
51
  const timeout = useTimeout();
52
+
53
+ // Get overridable methods from configuration
54
+ const {
55
+ setRowIndex
56
+ } = configuration.hooks.useGridRowsOverridableMethods(apiRef, props);
52
57
  const getRow = React.useCallback(id => {
53
58
  const model = gridRowsLookupSelector(apiRef)[id];
54
59
  if (model) {
@@ -226,39 +231,6 @@ export const useGridRows = (apiRef, props) => {
226
231
  }
227
232
  return children;
228
233
  }, [apiRef]);
229
- const setRowIndex = React.useCallback((rowId, targetIndex) => {
230
- const node = gridRowNodeSelector(apiRef, rowId);
231
- if (!node) {
232
- throw new Error(`MUI X: No row with id #${rowId} found.`);
233
- }
234
- if (node.parent !== GRID_ROOT_GROUP_ID) {
235
- throw new Error(`MUI X: The row reordering do not support reordering of grouped rows yet.`);
236
- }
237
- if (node.type !== 'leaf') {
238
- throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
239
- }
240
- apiRef.current.setState(state => {
241
- const group = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
242
- const allRows = group.children;
243
- const oldIndex = allRows.findIndex(row => row === rowId);
244
- if (oldIndex === -1 || oldIndex === targetIndex) {
245
- return state;
246
- }
247
- logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
248
- const updatedRows = [...allRows];
249
- updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
250
- return _extends({}, state, {
251
- rows: _extends({}, state.rows, {
252
- tree: _extends({}, state.rows.tree, {
253
- [GRID_ROOT_GROUP_ID]: _extends({}, group, {
254
- children: updatedRows
255
- })
256
- })
257
- })
258
- });
259
- });
260
- apiRef.current.publishEvent('rowsSet');
261
- }, [apiRef, logger]);
262
234
  const replaceRows = React.useCallback((firstRowToRender, newRows) => {
263
235
  if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
264
236
  throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
@@ -0,0 +1,6 @@
1
+ import { RefObject } from '@mui/x-internals/types';
2
+ import { GridRowId } from "../../../models/gridRows.js";
3
+ import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
4
+ export declare const useGridRowsOverridableMethods: (apiRef: RefObject<GridPrivateApiCommunity>) => {
5
+ setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
6
+ };
@@ -0,0 +1,43 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import * as React from 'react';
3
+ import { gridRowTreeSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
4
+ import { GRID_ROOT_GROUP_ID } from "./gridRowsUtils.js";
5
+ export const useGridRowsOverridableMethods = apiRef => {
6
+ const setRowIndex = React.useCallback((rowId, targetIndex) => {
7
+ const node = gridRowNodeSelector(apiRef, rowId);
8
+ if (!node) {
9
+ throw new Error(`MUI X: No row with id #${rowId} found.`);
10
+ }
11
+
12
+ // TODO: Remove irrelevant checks
13
+ if (node.parent !== GRID_ROOT_GROUP_ID) {
14
+ throw new Error(`MUI X: The row reordering do not support reordering of grouped rows yet.`);
15
+ }
16
+ if (node.type !== 'leaf') {
17
+ throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
18
+ }
19
+ apiRef.current.setState(state => {
20
+ const group = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
21
+ const allRows = group.children;
22
+ const oldIndex = allRows.findIndex(row => row === rowId);
23
+ if (oldIndex === -1 || oldIndex === targetIndex) {
24
+ return state;
25
+ }
26
+ const updatedRows = [...allRows];
27
+ updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
28
+ return _extends({}, state, {
29
+ rows: _extends({}, state.rows, {
30
+ tree: _extends({}, state.rows.tree, {
31
+ [GRID_ROOT_GROUP_ID]: _extends({}, group, {
32
+ children: updatedRows
33
+ })
34
+ })
35
+ })
36
+ });
37
+ });
38
+ apiRef.current.publishEvent('rowsSet');
39
+ }, [apiRef]);
40
+ return {
41
+ setRowIndex
42
+ };
43
+ };
@@ -93,7 +93,7 @@ export const useGridScroll = (apiRef, props) => {
93
93
  });
94
94
  }
95
95
  scrollCoordinates = apiRef.current.unstable_applyPipeProcessors('scrollToIndexes', scrollCoordinates, params);
96
- if (typeof scrollCoordinates.left !== undefined || typeof scrollCoordinates.top !== undefined) {
96
+ if (typeof scrollCoordinates.left !== 'undefined' || typeof scrollCoordinates.top !== 'undefined') {
97
97
  apiRef.current.scroll(scrollCoordinates);
98
98
  return true;
99
99
  }
@@ -1,2 +1,4 @@
1
1
  import { GridConfiguration } from "../../models/configuration/gridConfiguration.js";
2
- export declare const useGridConfiguration: () => GridConfiguration;
2
+ import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
3
+ import type { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
4
+ export declare const useGridConfiguration: <Api extends GridPrivateApiCommon = GridPrivateApiCommunity>() => GridConfiguration<Api>;
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid v8.10.1
2
+ * @mui/x-data-grid v8.11.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -41,7 +41,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
41
41
  export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
42
42
  export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
43
43
  export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
44
- export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
44
+ export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
45
45
  export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
46
46
  export type { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult } from "../hooks/features/filter/gridFilterState.js";
47
47
  export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
@@ -54,6 +54,7 @@ export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGri
54
54
  export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
55
55
  export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
56
56
  export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
57
+ export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
57
58
  export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
58
59
  export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRowsValue, GridRowsPartialUpdates, GridRowsPartialUpdateAction, GridTreeDepths, GridRowTreeUpdatedGroupsManager, GridRowTreeUpdateGroupAction, GridPinnedRowsState } from "../hooks/features/rows/gridRowsInterfaces.js";
59
60
  export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.js";
@@ -31,7 +31,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
31
31
  export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
32
32
  export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
33
33
  export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
34
- export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
34
+ export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
35
35
  export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
36
36
  export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
37
37
  export { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.js";
@@ -43,6 +43,7 @@ export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGri
43
43
  export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
44
44
  export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
45
45
  export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
46
+ export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
46
47
  export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
47
48
  export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.js";
48
49
  export { useGridRowsMeta, rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.js";
@@ -3,8 +3,8 @@ const fiFIGrid = {
3
3
  // Root
4
4
  noRowsLabel: 'Ei rivejä',
5
5
  noResultsOverlayLabel: 'Ei tuloksia.',
6
- // noColumnsOverlayLabel: 'No columns',
7
- // noColumnsOverlayManageColumns: 'Manage columns',
6
+ noColumnsOverlayLabel: 'Ei sarakkeita',
7
+ noColumnsOverlayManageColumns: 'Hallitse sarakkeita',
8
8
  // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
9
9
 
10
10
  // Density selector toolbar button text
@@ -58,9 +58,9 @@ const fiFIGrid = {
58
58
  filterPanelInputPlaceholder: 'Suodattimen arvo',
59
59
  // Filter operators text
60
60
  filterOperatorContains: 'sisältää',
61
- // filterOperatorDoesNotContain: 'does not contain',
61
+ filterOperatorDoesNotContain: 'ei sisällä',
62
62
  filterOperatorEquals: 'on yhtä suuri kuin',
63
- // filterOperatorDoesNotEqual: 'does not equal',
63
+ filterOperatorDoesNotEqual: 'on eri suuri kuin',
64
64
  filterOperatorStartsWith: 'alkaa',
65
65
  filterOperatorEndsWith: 'päättyy',
66
66
  filterOperatorIs: 'on',
@@ -80,9 +80,9 @@ const fiFIGrid = {
80
80
  'filterOperator<=': '<=',
81
81
  // Header filter operators text
82
82
  headerFilterOperatorContains: 'Sisältää',
83
- // headerFilterOperatorDoesNotContain: 'Does not contain',
83
+ headerFilterOperatorDoesNotContain: 'Ei sisällä',
84
84
  headerFilterOperatorEquals: 'On yhtä suuri kuin',
85
- // headerFilterOperatorDoesNotEqual: 'Does not equal',
85
+ headerFilterOperatorDoesNotEqual: 'On eri suuri kuin',
86
86
  headerFilterOperatorStartsWith: 'Alkaa',
87
87
  headerFilterOperatorEndsWith: 'Päättyy',
88
88
  headerFilterOperatorIs: 'On',
@@ -58,6 +58,7 @@ import MUIInputLabel from '@mui/material/InputLabel';
58
58
  import MUISkeleton from '@mui/material/Skeleton';
59
59
  import { forwardRef } from '@mui/x-internals/forwardRef';
60
60
  import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon, GridDownloadIcon } from "./icons/index.js";
61
+ import { GridColumnUnsortedIcon } from "../components/GridColumnUnsortedIcon.js";
61
62
  import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
62
63
  import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
63
64
  import "./augmentation.js";
@@ -663,6 +664,7 @@ const iconSlots = {
663
664
  filterPanelDeleteIcon: GridCloseIcon,
664
665
  columnFilteredIcon: GridFilterAltIcon,
665
666
  columnSelectorIcon: GridColumnIcon,
667
+ columnUnsortedIcon: GridColumnUnsortedIcon,
666
668
  columnSortedAscendingIcon: GridArrowUpwardIcon,
667
669
  columnSortedDescendingIcon: GridArrowDownwardIcon,
668
670
  columnResizeIcon: GridSeparatorIcon,
@@ -13,7 +13,7 @@ export interface GridParamsApi {
13
13
  * @param {string} field The column field.
14
14
  * @returns {v} The cell value.
15
15
  */
16
- getCellValue: <V extends any = any>(id: GridRowId, field: string) => V;
16
+ getCellValue: <V = any>(id: GridRowId, field: string) => V;
17
17
  /**
18
18
  * Gets the cell value.
19
19
  * Use it instead of `getCellValue` for better performance if you have `row` and `colDef`.
@@ -23,7 +23,7 @@ export interface GridParamsApi {
23
23
  * @returns {v} The cell value.
24
24
  * @ignore - do not document
25
25
  */
26
- getRowValue: <V extends any = any>(row: GridRowModel, colDef: GridColDef) => V;
26
+ getRowValue: <V = any>(row: GridRowModel, colDef: GridColDef) => V;
27
27
  /**
28
28
  * Gets the cell formatted value
29
29
  * Use it instead of `getCellParams` for better performance if you only need the formatted value.
@@ -33,7 +33,7 @@ export interface GridParamsApi {
33
33
  * @returns {v} The cell value.
34
34
  * @ignore - do not document
35
35
  */
36
- getRowFormattedValue: <V extends any = any>(row: GridRowModel, colDef: GridColDef) => V;
36
+ getRowFormattedValue: <V = any>(row: GridRowModel, colDef: GridColDef) => V;
37
37
  /**
38
38
  * Gets the [[GridCellParams]] object that is passed as argument in events.
39
39
  * @param {GridRowId} id The id of the row.
@@ -279,14 +279,16 @@ export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = a
279
279
  * Used to determine the label displayed for a given value option.
280
280
  * @param {ValueOptions} value The current value option.
281
281
  * @returns {string} The text to be displayed.
282
+ * @default {defaultGetOptionLabel}
282
283
  */
283
- getOptionLabel?: (value: ValueOptions) => string;
284
+ getOptionLabel: (value: ValueOptions) => string;
284
285
  /**
285
286
  * Used to determine the value used for a value option.
286
287
  * @param {ValueOptions} value The current value option.
287
288
  * @returns {string} The value to be used.
289
+ * @default {defaultGetOptionValue}
288
290
  */
289
- getOptionValue?: (value: ValueOptions) => any;
291
+ getOptionValue: (value: ValueOptions) => any;
290
292
  }
291
293
  /**
292
294
  * Column Definition interface.
@@ -1,11 +1,13 @@
1
1
  import * as React from 'react';
2
- import { GridRowAriaAttributesInternalHook } from "./gridRowConfiguration.js";
2
+ import { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook } from "./gridRowConfiguration.js";
3
3
  import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js";
4
4
  import type { GridRowId } from "../gridRows.js";
5
+ import type { GridPrivateApiCommon } from "../api/gridApiCommon.js";
6
+ import type { GridPrivateApiCommunity } from "../api/gridApiCommunity.js";
5
7
  export interface GridAriaAttributesInternalHook {
6
8
  useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
7
9
  }
8
- export interface GridInternalHook extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook {
10
+ export interface GridInternalHook<Api> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook<Api> {
9
11
  useCSSVariables: () => {
10
12
  id: string;
11
13
  variables: GridCSSVariablesInterface;
@@ -15,6 +17,6 @@ export interface GridInternalHook extends GridAriaAttributesInternalHook, GridRo
15
17
  value: any;
16
18
  } | null;
17
19
  }
18
- export interface GridConfiguration {
19
- hooks: GridInternalHook;
20
+ export interface GridConfiguration<Api extends GridPrivateApiCommon = GridPrivateApiCommunity> {
21
+ hooks: GridInternalHook<Api>;
20
22
  }
@@ -1,5 +1,7 @@
1
1
  import * as React from 'react';
2
- import { GridTreeNode } from "../gridRows.js";
2
+ import { RefObject } from '@mui/x-internals/types';
3
+ import { GridTreeNode, GridRowId } from "../gridRows.js";
4
+ import { DataGridProcessedProps } from "../props/DataGridProps.js";
3
5
  /**
4
6
  * Get the ARIA attributes for a row
5
7
  * @param {GridTreeNode} rowNode The row node
@@ -9,4 +11,12 @@ import { GridTreeNode } from "../gridRows.js";
9
11
  export type GetRowAriaAttributesFn = (rowNode: GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;
10
12
  export interface GridRowAriaAttributesInternalHook {
11
13
  useGridRowAriaAttributes: () => GetRowAriaAttributesFn;
14
+ }
15
+ /**
16
+ * Overridable row methods interface, these methods could be overriden in a higher plan package.
17
+ */
18
+ export interface GridRowsOverridableMethodsInternalHook<Api> {
19
+ useGridRowsOverridableMethods: (apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, 'processRowUpdate' | 'onProcessRowUpdateError' | 'dataSource'>) => {
20
+ setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
21
+ };
12
22
  }
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { IconProps } from "./gridBaseSlots.js";
3
+ import type { GridColumnUnsortedIconProps } from "../components/GridColumnUnsortedIcon.js";
3
4
  /**
4
5
  * Set of icons used in the grid component UI.
5
6
  */
@@ -34,6 +35,11 @@ export interface GridIconSlotsComponent {
34
35
  * @default GridColumnIcon
35
36
  */
36
37
  columnSelectorIcon: React.JSXElementConstructor<IconProps>;
38
+ /**
39
+ * Icon displayed on the side of the column header title when unsorted.
40
+ * @default GridColumnUnsortedIcon
41
+ */
42
+ columnUnsortedIcon: React.JSXElementConstructor<GridColumnUnsortedIconProps> | null;
37
43
  /**
38
44
  * Icon displayed on the side of the column header title when sorted in ascending order.
39
45
  * @default GridArrowUpwardIcon
@@ -787,7 +787,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
787
787
  rowId: GridRowId;
788
788
  }) => Promise<R> | R;
789
789
  /**
790
- * Callback called when `processRowUpdate` throws an error or rejects.
790
+ * Callback called when `processRowUpdate()` throws an error or rejects.
791
791
  * @param {any} error The error thrown.
792
792
  */
793
793
  onProcessRowUpdateError?: (error: any) => void;
@@ -10,7 +10,5 @@ export class FinalizationRegistryBasedCleanupTracking {
10
10
  unregister(unregisterToken) {
11
11
  this.registry.unregister(unregisterToken);
12
12
  }
13
-
14
- // eslint-disable-next-line class-methods-use-this
15
13
  reset() {}
16
14
  }
@@ -91,6 +91,21 @@ export interface GridPipeProcessingLookup {
91
91
  };
92
92
  context: boolean;
93
93
  };
94
+ /**
95
+ * Does validation of the current reorder operation.
96
+ * If the reorder is valid, it returns the position index of the drop indicator.
97
+ * - For example before first row is `0` and after the last row is `rows.length`.
98
+ * If the reorder is invalid, it returns `-1`.
99
+ */
100
+ getRowReorderTargetIndex: {
101
+ value: number;
102
+ context: {
103
+ sourceRowId: GridRowId;
104
+ targetRowId: GridRowId;
105
+ dropPosition: 'above' | 'below';
106
+ dragDirection: 'up' | 'down';
107
+ };
108
+ };
94
109
  }
95
110
  export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
96
111
  context: any;
@@ -372,7 +372,7 @@ const useGridCellEditing = (apiRef, props) => {
372
372
  if (onProcessRowUpdateError) {
373
373
  onProcessRowUpdateError(errorThrown);
374
374
  } else if (process.env.NODE_ENV !== 'production') {
375
- (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
375
+ (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
376
376
  }
377
377
  };
378
378
  try {
@@ -456,7 +456,7 @@ const useGridRowEditing = (apiRef, props) => {
456
456
  if (onProcessRowUpdateError) {
457
457
  onProcessRowUpdateError(errorThrown);
458
458
  } else if (process.env.NODE_ENV !== 'production') {
459
- (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
459
+ (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
460
460
  }
461
461
  };
462
462
  try {