@mui/x-data-grid 8.22.0 → 8.23.0

package/esm/locales/ptPT.js

@@ -3,10 +3,9 @@ const ptPTGrid = {
   // Root
   noRowsLabel: 'Nenhuma linha',
   noResultsOverlayLabel: 'Nenhum resultado encontrado.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
-  // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
-
+  noColumnsOverlayLabel: 'Sem colunas',
+  noColumnsOverlayManageColumns: 'Gerir colunas',
+  emptyPivotOverlayLabel: 'Adicione campos às linhas, colunas e valores para criar uma tabela dinâmica',
   // Density selector toolbar button text
   toolbarDensity: 'Densidade',
   toolbarDensityLabel: 'Densidade',
@@ -33,14 +32,11 @@ const ptPTGrid = {
   toolbarExportPrint: 'Imprimir',
   toolbarExportExcel: 'Descarregar como Excel',
   // Toolbar pivot button
-  // toolbarPivot: 'Pivot',
-
+  toolbarPivot: 'Pivot',
   // Toolbar charts button
-  // toolbarCharts: 'Charts',
-
+  toolbarCharts: 'Gráficos',
   // Toolbar AI Assistant button
-  // toolbarAssistant: 'AI Assistant',
-
+  toolbarAssistant: 'Assistente de IA',
   // Columns management text
   columnsManagementSearchTitle: 'Procurar',
   columnsManagementNoColumns: 'Sem colunas',
@@ -99,18 +95,17 @@ const ptPTGrid = {
   'headerFilterOperator=': 'É igual a',
   'headerFilterOperator!=': 'Não é igual',
   'headerFilterOperator>': 'Maior que',
-  'headerFilterOperator>=': 'Melhor que ou igual a',
+  'headerFilterOperator>=': 'Maior que ou igual a',
   'headerFilterOperator<': 'Menor que',
-  'headerFilterOperator<=': 'Menos que ou igual a',
-  // headerFilterClear: 'Clear filter',
-
+  'headerFilterOperator<=': 'Menor que ou igual a',
+  headerFilterClear: 'Limpar filtro',
   // Filter values text
   filterValueAny: 'qualquer',
   filterValueTrue: 'verdadeiro',
   filterValueFalse: 'falso',
   // Column menu text
   columnMenuLabel: 'Menu',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `Menu da coluna ${columnName}`,
   columnMenuShowColumns: 'Mostrar colunas',
   columnMenuManageColumns: 'Gerir colunas',
   columnMenuFilter: 'Filtro',
@@ -118,9 +113,8 @@ const ptPTGrid = {
   columnMenuUnsort: 'Desclassificar',
   columnMenuSortAsc: 'Classificar por ordem crescente',
   columnMenuSortDesc: 'Classificar por ordem decrescente',
-  // columnMenuManagePivot: 'Manage pivot',
-  // columnMenuManageCharts: 'Manage charts',
-
+  columnMenuManagePivot: 'Gerir pivot',
+  columnMenuManageCharts: 'Gerir gráficos',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} filtros ativos` : `${count} filtro ativo`,
   columnHeaderFiltersLabel: 'Mostrar filtros',
@@ -160,18 +154,18 @@ const ptPTGrid = {
   collapseDetailPanel: 'Colapsar',
   // Pagination
   paginationRowsPerPage: 'Linhas por página:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} de ${count !== -1 ? count : `mais do que ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `cerca de ${estimated}` : `mais do que ${to}`;
+    return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Primeira página';
@@ -189,114 +183,109 @@ const ptPTGrid = {
   rowReorderingHeaderName: 'Reordenação de linhas',
   // Aggregation
   aggregationMenuItemHeader: 'Agregação',
-  // aggregationFunctionLabelNone: 'none',
+  aggregationFunctionLabelNone: 'nenhuma',
   aggregationFunctionLabelSum: 'soma',
   aggregationFunctionLabelAvg: 'média',
   aggregationFunctionLabelMin: 'min',
   aggregationFunctionLabelMax: 'máx.',
   aggregationFunctionLabelSize: 'tamanho',
   // Pivot panel
-  // pivotToggleLabel: 'Pivot',
-  // pivotRows: 'Rows',
-  // pivotColumns: 'Columns',
-  // pivotValues: 'Values',
-  // pivotCloseButton: 'Close pivot settings',
-  // pivotSearchButton: 'Search fields',
-  // pivotSearchControlPlaceholder: 'Search fields',
-  // pivotSearchControlLabel: 'Search fields',
-  // pivotSearchControlClear: 'Clear search',
-  // pivotNoFields: 'No fields',
-  // pivotMenuMoveUp: 'Move up',
-  // pivotMenuMoveDown: 'Move down',
-  // pivotMenuMoveToTop: 'Move to top',
-  // pivotMenuMoveToBottom: 'Move to bottom',
-  // pivotMenuRows: 'Rows',
-  // pivotMenuColumns: 'Columns',
-  // pivotMenuValues: 'Values',
-  // pivotMenuOptions: 'Field options',
-  // pivotMenuAddToRows: 'Add to Rows',
-  // pivotMenuAddToColumns: 'Add to Columns',
-  // pivotMenuAddToValues: 'Add to Values',
-  // pivotMenuRemove: 'Remove',
-  // pivotDragToRows: 'Drag here to create rows',
-  // pivotDragToColumns: 'Drag here to create columns',
-  // pivotDragToValues: 'Drag here to create values',
-  // pivotYearColumnHeaderName: '(Year)',
-  // pivotQuarterColumnHeaderName: '(Quarter)',
-
+  pivotToggleLabel: 'Pivot',
+  pivotRows: 'Linhas',
+  pivotColumns: 'Colunas',
+  pivotValues: 'Valores',
+  pivotCloseButton: 'Fechar configurações de pivot',
+  pivotSearchButton: 'Pesquisar campos',
+  pivotSearchControlPlaceholder: 'Pesquisar campos',
+  pivotSearchControlLabel: 'Pesquisar campos',
+  pivotSearchControlClear: 'Limpar pesquisa',
+  pivotNoFields: 'Nenhum campo',
+  pivotMenuMoveUp: 'Mover para cima',
+  pivotMenuMoveDown: 'Mover para baixo',
+  pivotMenuMoveToTop: 'Mover para o topo',
+  pivotMenuMoveToBottom: 'Mover para o fundo',
+  pivotMenuRows: 'Linhas',
+  pivotMenuColumns: 'Colunas',
+  pivotMenuValues: 'Valores',
+  pivotMenuOptions: 'Opções do campo',
+  pivotMenuAddToRows: 'Adicionar às Linhas',
+  pivotMenuAddToColumns: 'Adicionar às Colunas',
+  pivotMenuAddToValues: 'Adicionar aos Valores',
+  pivotMenuRemove: 'Remover',
+  pivotDragToRows: 'Arraste para aqui para criar linhas',
+  pivotDragToColumns: 'Arraste para aqui para criar colunas',
+  pivotDragToValues: 'Arraste para aqui para criar valores',
+  pivotYearColumnHeaderName: '(Ano)',
+  pivotQuarterColumnHeaderName: '(Trimestre)',
   // Charts configuration panel
-  // chartsNoCharts: 'There are no charts available',
-  // chartsChartNotSelected: 'Select a chart type to configure its options',
-  // chartsTabChart: 'Chart',
-  // chartsTabFields: 'Fields',
-  // chartsTabCustomize: 'Customize',
-  // chartsCloseButton: 'Close charts configuration',
-  // chartsSyncButtonLabel: 'Sync chart',
-  // chartsSearchPlaceholder: 'Search fields',
-  // chartsSearchLabel: 'Search fields',
-  // chartsSearchClear: 'Clear search',
-  // chartsNoFields: 'No fields',
-  // chartsFieldBlocked: 'This field cannot be added to any section',
-  // chartsCategories: 'Categories',
-  // chartsSeries: 'Series',
-  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
-  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
-  // chartsMenuMoveUp: 'Move up',
-  // chartsMenuMoveDown: 'Move down',
-  // chartsMenuMoveToTop: 'Move to top',
-  // chartsMenuMoveToBottom: 'Move to bottom',
-  // chartsMenuOptions: 'Field options',
-  // chartsMenuRemove: 'Remove',
-  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
-  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
-
+  chartsNoCharts: 'Não há gráficos disponíveis',
+  chartsChartNotSelected: 'Selecione um tipo de gráfico para configurar as suas opções',
+  chartsTabChart: 'Gráfico',
+  chartsTabFields: 'Campos',
+  chartsTabCustomize: 'Personalizar',
+  chartsCloseButton: 'Fechar configuração de gráficos',
+  chartsSyncButtonLabel: 'Sincronizar gráfico',
+  chartsSearchPlaceholder: 'Pesquisar campos',
+  chartsSearchLabel: 'Pesquisar campos',
+  chartsSearchClear: 'Limpar pesquisa',
+  chartsNoFields: 'Nenhum campo',
+  chartsFieldBlocked: 'Este campo não pode ser adicionado a nenhuma secção',
+  chartsCategories: 'Categorias',
+  chartsSeries: 'Séries',
+  chartsMenuAddToDimensions: dimensionLabel => `Adicionar a ${dimensionLabel}`,
+  chartsMenuAddToValues: valuesLabel => `Adicionar a ${valuesLabel}`,
+  chartsMenuMoveUp: 'Mover para cima',
+  chartsMenuMoveDown: 'Mover para baixo',
+  chartsMenuMoveToTop: 'Mover para o topo',
+  chartsMenuMoveToBottom: 'Mover para o fundo',
+  chartsMenuOptions: 'Opções do campo',
+  chartsMenuRemove: 'Remover',
+  chartsDragToDimensions: dimensionLabel => `Arraste para aqui para usar a coluna como ${dimensionLabel}`,
+  chartsDragToValues: valuesLabel => `Arraste para aqui para usar a coluna como ${valuesLabel}`,
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
-  // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantPanelTitle: 'Assistente de IA',
+  aiAssistantPanelClose: 'Fechar Assistente de IA',
+  aiAssistantPanelNewConversation: 'Nova conversa',
+  aiAssistantPanelConversationHistory: 'Histórico de conversas',
+  aiAssistantPanelEmptyConversation: 'Nenhum histórico de prompts',
+  aiAssistantSuggestions: 'Sugestões',
   // Prompt field
   promptFieldLabel: 'Prompt',
-  promptFieldPlaceholder: 'Digite um prompt…',
-  promptFieldPlaceholderWithRecording: 'Digite ou grave um prompt…',
-  promptFieldPlaceholderListening: 'Ouvindo o prompt…',
-  // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldPlaceholder: 'Digite um prompt',
+  promptFieldPlaceholderWithRecording: 'Digite ou grave um prompt',
+  promptFieldPlaceholderListening: 'Ouvindo o prompt',
+  promptFieldSpeechRecognitionNotSupported: 'Reconhecimento de voz não é suportado neste navegador',
   promptFieldSend: 'Enviar',
   promptFieldRecord: 'Gravar',
-  promptFieldStopRecording: 'Parar gravação'
-
+  promptFieldStopRecording: 'Parar gravação',
   // Prompt
-  // promptRerun: 'Run again',
-  // promptProcessing: 'Processing…',
-  // promptAppliedChanges: 'Applied changes',
-
+  promptRerun: 'Executar novamente',
+  promptProcessing: 'Processando…',
+  promptAppliedChanges: 'Alterações aplicadas',
   // Prompt changes
-  // promptChangeGroupDescription: (column: string) => `Group by ${column}`,
-  // promptChangeAggregationLabel: (column: string, aggregation: string) => `${column} (${aggregation})`,
-  // promptChangeAggregationDescription: (column: string, aggregation: string) => `Aggregate ${column} (${aggregation})`,
-  // promptChangeFilterLabel: (column: string, operator: string, value: string) => {
-  //   if (operator === 'is any of') {
-  //     return `${column} is any of: ${value}`;
-  //   }
-  //   return `${column} ${operator} ${value}`;
-  // },
-  // promptChangeFilterDescription: (column: string, operator: string, value: string) => {
-  //   if (operator === 'is any of') {
-  //     return `Filter where ${column} is any of: ${value}`;
-  //   }
-  //   return `Filter where ${column} ${operator} ${value}`;
-  // },
-  // promptChangeSortDescription: (column: string, direction: string) => `Sort by ${column} (${direction})`,
-  // promptChangePivotEnableLabel: 'Pivot',
-  // promptChangePivotEnableDescription: 'Enable pivot',
-  // promptChangePivotColumnsLabel: (count: number) => `Columns (${count})`,
-  // promptChangePivotColumnsDescription: (column: string, direction: string) => `${column}${direction ? ` (${direction})` : ''}`,
-  // promptChangePivotRowsLabel: (count: number) => `Rows (${count})`,
-  // promptChangePivotValuesLabel: (count: number) => `Values (${count})`,
-  // promptChangePivotValuesDescription: (column: string, aggregation: string) => `${column} (${aggregation})`,
-  // promptChangeChartsLabel: (dimensionsCount: number, valuesCount: number) => `Dimensions (${dimensionsCount}), Values (${valuesCount})`,
+  promptChangeGroupDescription: column => `Agrupar por ${column}`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `Agregar ${column} (${aggregation})`,
+  promptChangeFilterLabel: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `${column} é um de: ${value}`;
+    }
+    return `${column} ${operator} ${value}`;
+  },
+  promptChangeFilterDescription: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `Filtrar onde ${column} é um de: ${value}`;
+    }
+    return `Filtrar onde ${column} ${operator} ${value}`;
+  },
+  promptChangeSortDescription: (column, direction) => `Ordenar por ${column} (${direction})`,
+  promptChangePivotEnableLabel: 'Pivot',
+  promptChangePivotEnableDescription: 'Ativar pivot',
+  promptChangePivotColumnsLabel: count => `Colunas (${count})`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `Linhas (${count})`,
+  promptChangePivotValuesLabel: count => `Valores (${count})`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeChartsLabel: (dimensionsCount, valuesCount) => `Dimensões (${dimensionsCount}), Valores (${valuesCount})`
 };
 export const ptPT = getGridLocalization(ptPTGrid);

package/esm/locales/svSE.js

@@ -3,8 +3,8 @@ const svSEGrid = {
   // Root
   noRowsLabel: 'Inga rader',
   noResultsOverlayLabel: 'Inga resultat funna.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Inga kolumner',
+  noColumnsOverlayManageColumns: 'Hantera kolumner',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text

package/esm/models/gridAggregation.d.ts

@@ -0,0 +1,18 @@
+export type GridAggregationPosition = 'inline' | 'footer';
+export interface GridAggregationCellMeta {
+  /**
+   * If `true`, the current aggregated value has the same unit as the value of the other cells of this row.
+   * For instance, "min" / "max" aggregation have the same unit as the other cells.
+   * If `false`, the current aggregated value has another unit or not unit.
+   * For instance, "size" aggregation has no unit.
+   */
+  hasCellUnit: boolean;
+  /**
+   * Name of the aggregation function currently applied on this cell.
+   */
+  aggregationFunctionName: string;
+  /**
+   * Position of the aggregated value.
+   */
+  position: GridAggregationPosition;
+}

package/esm/models/gridAggregation.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/domUtils.d.ts

@@ -26,4 +26,5 @@ export declare function findRightPinnedCellsBeforeCol(api: GridPrivateApiCommuni
 export declare function findLeftPinnedHeadersAfterCol(api: GridPrivateApiCommunity, col: HTMLElement, isRtl: boolean): HTMLElement[];
 export declare function findRightPinnedHeadersBeforeCol(api: GridPrivateApiCommunity, col: HTMLElement, isRtl: boolean): HTMLElement[];
 export declare function findGridHeader(api: GridPrivateApiCommunity, field: string): Element | null;
+export declare function findGridHeaderFilter(api: GridPrivateApiCommunity, field: string): Element | null;
 export declare function findGridCells(api: GridPrivateApiCommunity, field: string): Element[];

package/esm/utils/domUtils.js

@@ -186,6 +186,10 @@ export function findGridHeader(api, field) {
   const headers = api.columnHeadersContainerRef.current;
   return headers.querySelector(`:scope > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`);
 }
+export function findGridHeaderFilter(api, field) {
+  const headers = api.columnHeadersContainerRef.current;
+  return headers.querySelector(`:scope > .${gridClasses.headerFilterRow} > [data-field="${escapeOperandAttributeSelector(field)}"]`);
+}
 export function findGridCells(api, field) {
   const container = api.virtualScrollerRef.current;
   return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));

package/esm/utils/utils.d.ts

@@ -27,4 +27,4 @@ export declare function deepClone(obj: Record<string, any>): any;
  * that hint disables checks on all values instead of just one.
  */
 export declare function eslintUseValue(_: any): void;
-export declare const runIf: (condition: boolean, fn: Function) => (params: unknown) => void;
+export declare const runIf: (condition: boolean, fn: Function) => (...params: unknown[]) => void;

package/esm/utils/utils.js

@@ -75,8 +75,8 @@ export function deepClone(obj) {
  * that hint disables checks on all values instead of just one.
  */
 export function eslintUseValue(_) {}
-export const runIf = (condition, fn) => params => {
+export const runIf = (condition, fn) => (...params) => {
   if (condition) {
-    fn(params);
+    fn(...params);
   }
 };

package/hooks/core/useGridProps.js

@@ -14,7 +14,8 @@ const propsStateInitializer = (state, props) => {
     props: {
       listView: props.listView,
       getRowId: props.getRowId,
-      isCellEditable: props.isCellEditable
+      isCellEditable: props.isCellEditable,
+      isRowSelectable: props.isRowSelectable
     }
   });
 };

package/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -1,6 +1,7 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.js";
 export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
   includeHeaders: boolean;
+  includeHeaderFilters: boolean;
   includeOutliers: boolean;
   outliersFactor: number;
   expand: boolean;
@@ -16,6 +17,12 @@ export type GridAutosizeOptions = {
    * @default false
    */
   includeHeaders?: boolean;
+  /**
+   * If true, include header filter widths in the calculation.
+   * Only applies when header filters are enabled.
+   * @default false
+   */
+  includeHeaderFilters?: boolean;
   /**
    * If true, width outliers will be ignored.
    * @default false

package/hooks/features/columnResize/gridColumnResizeApi.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = void 0;
 const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
+  includeHeaderFilters: false,
   includeOutliers: false,
   outliersFactor: 1.5,
   expand: false,

package/hooks/features/columnResize/useGridColumnResize.js

@@ -24,6 +24,8 @@ var _useTimeout = require("../../utils/useTimeout");
 var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
 var _columns = require("../columns");
 var _dimensions = require("../dimensions");
+var _headerFiltering = require("../headerFiltering");
+var _columnResizeSelector = require("./columnResizeSelector");
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -140,6 +142,7 @@ function extractColumnWidths(apiRef, options, columns) {
   const widthByField = {};
   const root = apiRef.current.rootElementRef.current;
   root.classList.add(_gridClasses.gridClasses.autosizing);
+  const includeHeaderFilters = options.includeHeaderFilters && (0, _headerFiltering.gridHeaderFilteringEnabledSelector)(apiRef);
   columns.forEach(column => {
     const cells = (0, _domUtils.findGridCells)(apiRef.current, column.field);
     const widths = cells.map(cell => {
@@ -170,6 +173,16 @@ function extractColumnWidths(apiRef, options, columns) {
         filteredWidths.push(width);
       }
     }
+    if (includeHeaderFilters) {
+      const headerFilter = (0, _domUtils.findGridHeaderFilter)(apiRef.current, column.field);
+      if (headerFilter) {
+        const style = window.getComputedStyle(headerFilter, null);
+        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+        const contentWidth = headerFilter.scrollWidth;
+        const width = contentWidth + paddingWidth;
+        filteredWidths.push(width);
+      }
+    }
     const hasColumnMin = column.minWidth !== -Infinity && column.minWidth !== undefined;
     const hasColumnMax = column.maxWidth !== Infinity && column.maxWidth !== undefined;
     const min = hasColumnMin ? column.minWidth : 0;
@@ -328,6 +341,11 @@ const useGridColumnResize = (apiRef, props) => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
   };
+  const setCellElementsRef = () => {
+    if (refs.columnHeaderElement) {
+      refs.cellElements = (0, _domUtils.findGridCellElementsFromCol)(refs.columnHeaderElement, apiRef.current);
+    }
+  };
   const storeReferences = (colDef, separator, xStart) => {
     const root = apiRef.current.rootElementRef.current;
     refs.initialColWidth = colDef.computedWidth;
@@ -339,7 +357,7 @@ const useGridColumnResize = (apiRef, props) => {
       refs.headerFilterElement = headerFilterElement;
     }
     refs.groupHeaderElements = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
-    refs.cellElements = (0, _domUtils.findGridCellElementsFromCol)(refs.columnHeaderElement, apiRef.current);
+    setCellElementsRef();
     refs.fillerLeft = (0, _domUtils.findGridElement)(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
     refs.fillerRight = (0, _domUtils.findGridElement)(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
@@ -586,6 +604,15 @@ const useGridColumnResize = (apiRef, props) => {
   (0, _utils.useGridEvent)(apiRef, 'columnResizeStart', handleResizeStart);
   (0, _utils.useGridEvent)(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
   (0, _utils.useGridEvent)(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
+  (0, _utils.useGridEvent)(apiRef, 'rowsSet', () => {
+    // if the user is still resizing the column, update the cell references included in the resize action
+    if ((0, _columnResizeSelector.gridResizingColumnFieldSelector)(apiRef) !== '') {
+      // wait until the rows are in the DOM
+      requestAnimationFrame(() => {
+        setCellElementsRef();
+      });
+    }
+  });
   (0, _utils.useGridEventPriority)(apiRef, 'columnResize', props.onColumnResize);
   (0, _utils.useGridEventPriority)(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };

package/hooks/features/columns/gridColumnsUtils.js

@@ -251,8 +251,7 @@ const createColumnsState = ({
     const currentState = (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef);
     columnsState = {
       orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
-      lookup: (0, _extends2.default)({}, currentState.lookup),
-      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      lookup: keepOnlyColumnsToUpsert ? {} : (0, _extends2.default)({}, currentState.lookup),
       columnVisibilityModel,
       initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
@@ -265,12 +264,10 @@ const createColumnsState = ({
       }
     }
   }
-  const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
     const {
       field
     } = newColumn;
-    columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
@@ -298,9 +295,17 @@ const createColumnsState = ({
         }
       }
     });
-    columnsState.lookup[field] = (0, _resolveProps.default)(existingState, (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), newColumn, {
-      hasBeenResized
-    }));
+    const mergedProps = (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), {
+      hasBeenResized,
+      field
+    });
+    let key;
+    for (key in newColumn) {
+      if (newColumn[key] !== undefined && key !== 'field') {
+        mergedProps[key] = newColumn[key];
+      }
+    }
+    columnsState.lookup[field] = (0, _resolveProps.default)(existingState, mergedProps);
   });
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
     Object.keys(columnsState.lookup).forEach(field => {

package/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -21,8 +21,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   cache: GridDataSourceCache;
   events: {
     strategyAvailabilityChange: GridEventListener<"strategyAvailabilityChange">;
-    sortModelChange: (params: unknown) => void;
-    filterModelChange: (params: unknown) => void;
-    paginationModelChange: (params: unknown) => void;
+    sortModelChange: (...params: unknown[]) => void;
+    filterModelChange: (...params: unknown[]) => void;
+    paginationModelChange: (...params: unknown[]) => void;
   };
 };

package/hooks/features/editing/useGridCellEditing.js

@@ -114,6 +114,7 @@ const useGridCellEditing = (apiRef, props) => {
         reason = _gridEditCellParams.GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = _gridEditCellParams.GridCellEditStartReasons.enterKeyDown;
+        event.preventDefault();
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown;
       }

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -113,7 +113,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
-    if (!(0, _keyboardUtils.isNavigationKey)(event.key) && event.key !== 'Tab') {
+    if (!(0, _keyboardUtils.isNavigationKey)(event.key) && event.key !== 'Tab' && event.key !== 'Enter') {
       return;
     }
 

package/hooks/features/pagination/gridPaginationSelector.js

@@ -66,6 +66,9 @@ const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector =
   if (!clientSidePaginationEnabled) {
     return null;
   }
+  if (!visibleSortedRowEntries || visibleSortedRowEntries.length === 0) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);