@mui/x-data-grid 7.27.2 → 7.28.0

package/modern/locales/ptPT.js

@@ -96,6 +96,7 @@ const ptPTGrid = {
   filterValueFalse: 'falso',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Mostrar colunas',
   columnMenuManageColumns: 'Gerir colunas',
   columnMenuFilter: 'Filtro',

package/modern/locales/roRO.js

@@ -96,6 +96,7 @@ const roROGrid = {
   filterValueFalse: 'Nu',
   // Column menu text
   columnMenuLabel: 'Meniu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Afișează toate coloanele',
   columnMenuManageColumns: 'Gestionează coloane',
   columnMenuFilter: 'Filtru',

package/modern/locales/ruRU.js

@@ -111,6 +111,7 @@ const ruRUGrid = {
   filterValueFalse: 'ложь',
   // Column menu text
   columnMenuLabel: 'Меню',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Показать столбцы',
   columnMenuManageColumns: 'Управление колонками',
   columnMenuFilter: 'Фильтр',

package/modern/locales/skSK.js

@@ -41,9 +41,8 @@ const skSKGrid = {
   columnsManagementSearchTitle: 'Vyhľadať',
   columnsManagementNoColumns: 'Žiadne stĺpce',
   columnsManagementShowHideAllText: 'Zobraziť/Skryť všetko',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementReset: 'Resetovať',
+  columnsManagementDeleteIconLabel: 'Vymazať',
   // Filter panel text
   filterPanelAddFilter: 'Pridať filter',
   filterPanelRemoveAll: 'Odstrániť všetky',
@@ -57,9 +56,9 @@ const skSKGrid = {
   filterPanelInputPlaceholder: 'Hodnota filtra',
   // Filter operators text
   filterOperatorContains: 'obsahuje',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'neobsahuje',
   filterOperatorEquals: 'rovná sa',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nerovná sa',
   filterOperatorStartsWith: 'začína s',
   filterOperatorEndsWith: 'končí na',
   filterOperatorIs: 'je',
@@ -79,9 +78,9 @@ const skSKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Obsahuje',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Neobsahuje',
   headerFilterOperatorEquals: 'Rovná sa',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nerovná sa',
   headerFilterOperatorStartsWith: 'Začína s',
   headerFilterOperatorEndsWith: 'Končí na',
   headerFilterOperatorIs: 'Je',
@@ -105,6 +104,7 @@ const skSKGrid = {
   filterValueFalse: 'nie',
   // Column menu text
   columnMenuLabel: 'Menu',
+  columnMenuAriaLabel: columnName => `Ponuka stĺpca ${columnName}`,
   columnMenuShowColumns: 'Zobraziť stĺpce',
   columnMenuManageColumns: 'Spravovať stĺpce',
   columnMenuFilter: 'Filter',

package/modern/locales/svSE.js

@@ -97,6 +97,7 @@ const svSEGrid = {
   filterValueFalse: 'falskt',
   // Column menu text
   columnMenuLabel: 'Meny',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Visa kolumner',
   columnMenuManageColumns: 'Hantera kolumner',
   columnMenuFilter: 'Filtrera',

package/modern/locales/trTR.js

@@ -96,6 +96,7 @@ const trTRGrid = {
   filterValueFalse: 'yanlış',
   // Column menu text
   columnMenuLabel: 'Menü',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Sütunları göster',
   columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre Ekle',

package/modern/locales/ukUA.js

@@ -111,6 +111,7 @@ const ukUAGrid = {
   filterValueFalse: 'ні',
   // Column menu text
   columnMenuLabel: 'Меню',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Показати стовпці',
   columnMenuManageColumns: 'Керування стовпцями',
   columnMenuFilter: 'Фільтр',

package/modern/locales/urPK.js

@@ -96,6 +96,7 @@ const urPKGrid = {
   filterValueFalse: 'غلط',
   // Column menu text
   columnMenuLabel: 'مینیو',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'کالم دکھائیں',
   columnMenuManageColumns: 'کالم مینج کریں',
   columnMenuFilter: 'فلٹر',

package/modern/locales/viVN.js

@@ -97,6 +97,7 @@ const viVNGrid = {
   filterValueFalse: 'Không',
   // Column menu text
   columnMenuLabel: 'Danh mục',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Danh sách cột',
   columnMenuManageColumns: 'Quản lý cột',
   columnMenuFilter: 'Bộ lọc',

package/modern/locales/zhCN.js

@@ -96,6 +96,7 @@ const zhCNGrid = {
   filterValueFalse: '假',
   // Column menu text
   columnMenuLabel: '菜单',
+  columnMenuAriaLabel: columnName => `${columnName} 列菜单`,
   columnMenuShowColumns: '显示',
   columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',

package/modern/locales/zhHK.js

@@ -30,12 +30,11 @@ const zhHKGrid = {
   toolbarExportPrint: '列印',
   toolbarExportExcel: '下載為 Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '搜尋',
+  columnsManagementNoColumns: '沒有列',
+  columnsManagementShowHideAllText: '顯示/隱藏所有',
+  columnsManagementReset: '重置',
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '新增過濾器',
   filterPanelRemoveAll: '移除所有',
@@ -49,9 +48,9 @@ const zhHKGrid = {
   filterPanelInputPlaceholder: '過濾值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等於',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等於',
   filterOperatorStartsWith: '以。。開始',
   filterOperatorEndsWith: '以。。結束',
   filterOperatorIs: '是',
@@ -71,9 +70,9 @@ const zhHKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等於',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等於',
   headerFilterOperatorStartsWith: '以。。開始',
   headerFilterOperatorEndsWith: '以。。結束',
   headerFilterOperatorIs: '是',
@@ -87,7 +86,7 @@ const zhHKGrid = {
   headerFilterOperatorIsAnyOf: '是以下任一個',
   'headerFilterOperator=': '等於',
   'headerFilterOperator!=': '不等於',
-  'headerFilterOperator>': '比...更棒',
+  'headerFilterOperator>': '大於',
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '少於',
   'headerFilterOperator<=': '小於或等於',
@@ -97,6 +96,7 @@ const zhHKGrid = {
   filterValueFalse: '錯誤的',
   // Column menu text
   columnMenuLabel: '選單',
+  columnMenuAriaLabel: columnName => `${columnName} 欄目選單`,
   columnMenuShowColumns: '顯示欄目',
   columnMenuManageColumns: '管理欄目',
   columnMenuFilter: '篩選',

package/modern/locales/zhTW.js

@@ -30,12 +30,11 @@ const zhTWGrid = {
   toolbarExportPrint: '列印',
   toolbarExportExcel: '匯出 Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '搜尋',
+  columnsManagementNoColumns: '沒有欄位',
+  columnsManagementShowHideAllText: '顯示/隱藏所有',
+  columnsManagementReset: '重置',
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '增加篩選器',
   filterPanelRemoveAll: '清除所有',
@@ -49,9 +48,9 @@ const zhTWGrid = {
   filterPanelInputPlaceholder: '篩選值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等於',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等於',
   filterOperatorStartsWith: '以...開頭',
   filterOperatorEndsWith: '以...結束',
   filterOperatorIs: '為',
@@ -71,9 +70,9 @@ const zhTWGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等於',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等於',
   headerFilterOperatorStartsWith: '以...開頭',
   headerFilterOperatorEndsWith: '以...結束',
   headerFilterOperatorIs: '為',
@@ -97,6 +96,7 @@ const zhTWGrid = {
   filterValueFalse: '假',
   // Column menu text
   columnMenuLabel: '選單',
+  columnMenuAriaLabel: columnName => `${columnName} 欄位選單`,
   columnMenuShowColumns: '顯示欄位',
   columnMenuManageColumns: '管理欄位',
   columnMenuFilter: '篩選器',

package/node/components/cell/GridActionsCell.js

@@ -99,7 +99,9 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
-  const toggleMenu = () => {
+  const toggleMenu = event => {
+    event.stopPropagation();
+    event.preventDefault();
     if (open) {
       hideMenu();
     } else {

package/node/components/cell/GridCell.js

@@ -201,9 +201,9 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     const isRightPinned = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
-      cellStyle.zIndex = 5;
+      cellStyle.zIndex = 10;
       if (isLeftPinned || isRightPinned) {
-        cellStyle.zIndex = 6;
+        cellStyle.zIndex = 40;
       }
     }
     return cellStyle;

package/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -43,6 +43,7 @@ const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.m
     event.stopPropagation();
     apiRef.current.toggleColumnMenu(colDef.field);
   }, [apiRef, colDef.field]);
+  const columnName = colDef.headerName ?? colDef.field;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
@@ -53,7 +54,7 @@ const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.m
         ref: iconButtonRef,
         tabIndex: -1,
         className: classes.button,
-        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        "aria-label": apiRef.current.getLocaleText('columnMenuAriaLabel')(columnName),
         size: "small",
         onClick: handleMenuIconClick,
         "aria-haspopup": "menu",

package/node/components/containers/GridRootStyles.js

@@ -492,14 +492,14 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}, & .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 4,
+      zIndex: 40,
       // Should be above the column separator
       background: 'var(--DataGrid-pinnedBackground)'
     },
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       position: 'absolute',
       overflow: 'hidden',
-      zIndex: 3,
+      zIndex: 30,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -739,7 +739,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 3,
+      zIndex: 30,
       background: 'var(--DataGrid-pinnedBackground)',
       '&.Mui-selected': {
         backgroundColor: pinnedSelectedBackgroundColor

package/node/components/panel/filterPanel/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  GridFilterInputValue: true,
   GridFilterPanel: true
 };
+Object.defineProperty(exports, "GridFilterInputValue", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterInputValue.GridFilterInputValue;
+  }
+});
 Object.defineProperty(exports, "GridFilterPanel", {
   enumerable: true,
   get: function () {
@@ -25,17 +32,6 @@ Object.keys(_GridFilterForm).forEach(function (key) {
   });
 });
 var _GridFilterInputValue = require("./GridFilterInputValue");
-Object.keys(_GridFilterInputValue).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridFilterInputValue[key];
-    }
-  });
-});
 var _GridFilterInputDate = require("./GridFilterInputDate");
 Object.keys(_GridFilterInputDate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/components/virtualization/GridBottomContainer.js

@@ -21,7 +21,7 @@ const useUtilityClasses = () => {
 };
 const Element = (0, _system.styled)('div')({
   position: 'sticky',
-  zIndex: 4,
+  zIndex: 40,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
 });
 function GridBottomContainer(props) {

package/node/components/virtualization/GridTopContainer.js

@@ -21,7 +21,7 @@ const useUtilityClasses = () => {
 };
 const Element = (0, _system.styled)('div')({
   position: 'sticky',
-  zIndex: 4,
+  zIndex: 40,
   top: 0
 });
 function GridTopContainer(props) {

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -28,9 +28,9 @@ const useUtilityClasses = (ownerState, position) => {
 const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
-  zIndex: 6,
+  zIndex: 60,
   '&:hover': {
-    zIndex: 7
+    zIndex: 70
   },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
@@ -137,7 +137,13 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       top: 0
     } : undefined,
     tabIndex: -1,
-    "aria-hidden": "true",
+    "aria-hidden": "true"
+    // tabIndex does not prevent focus with a mouse click, throwing a console error
+    // https://github.com/mui/mui-x/issues/16706
+    ,
+    onFocus: event => {
+      event.target.blur();
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: contentRef,
       className: classes.content

package/node/constants/localeTextConstants.js

@@ -100,6 +100,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   filterValueFalse: 'false',
   // Column menu text
   columnMenuLabel: 'Menu',
+  columnMenuAriaLabel: columnName => `${columnName} column menu`,
   columnMenuShowColumns: 'Show columns',
   columnMenuManageColumns: 'Manage columns',
   columnMenuFilter: 'Filter',

package/node/hooks/features/editing/useGridRowEditing.js

@@ -29,6 +29,7 @@ const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
+  const prevRowValuesLookup = React.useRef({});
   const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
@@ -319,6 +320,7 @@ const useGridRowEditing = (apiRef, props) => {
       deleteValue,
       initialValue
     } = params;
+    const row = apiRef.current.getRow(id);
     const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
@@ -341,6 +343,7 @@ const useGridRowEditing = (apiRef, props) => {
       };
       return acc;
     }, {});
+    prevRowValuesLookup.current[id] = row;
     updateOrDeleteRowState(id, newProps);
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
@@ -351,7 +354,7 @@ const useGridRowEditing = (apiRef, props) => {
       const newValue = deleteValue ? (0, _utils3.getDefaultCellValue)(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({
         id,
-        row: apiRef.current.getRow(id),
+        row,
         props: newProps[field],
         hasChanged: newValue !== value
       })).then(processedProps => {
@@ -390,13 +393,14 @@ const useGridRowEditing = (apiRef, props) => {
       }
       updateOrDeleteRowState(id, null);
       updateRowInRowModesModel(id, null);
+      delete prevRowValuesLookup.current[id];
     };
     if (ignoreModifications) {
       finishRowEditMode();
       return;
     }
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
+    const row = prevRowValuesLookup.current[id];
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
     if (isSomeFieldProcessingProps) {
       prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
@@ -410,14 +414,17 @@ const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
-        // Revert the mode in the rowModesModel prop back to "edit"
-        updateRowInRowModesModel(id, {
-          mode: _gridEditRowModel.GridRowModes.Edit
-        });
+        // The row might have been deleted
+        if (prevRowModesModel.current[id]) {
+          prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
+          // Revert the mode in the rowModesModel prop back to "edit"
+          updateRowInRowModesModel(id, {
+            mode: _gridEditRowModel.GridRowModes.Edit
+          });
+        }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -548,10 +555,12 @@ const useGridRowEditing = (apiRef, props) => {
     if (!editingState[id]) {
       return apiRef.current.getRow(id);
     }
-    let rowUpdate = (0, _extends2.default)({}, row);
+    let rowUpdate = (0, _extends2.default)({}, prevRowValuesLookup.current[id], row);
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
-      if (column.valueSetter) {
+      // Column might have been removed
+      // see https://github.com/mui/mui-x/pull/16888
+      if (column?.valueSetter) {
         rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;

package/node/hooks/features/export/useGridPrintExport.js

@@ -114,12 +114,13 @@ const useGridPrintExport = (apiRef, props) => {
     gridClone.style.contain = 'size';
     let gridToolbarElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.toolbarContainer}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.offsetHeight || 0;
+    const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${_gridClasses.gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
-    if (normalizeOptions.hideFooter) {
-      gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.remove();
+    if (normalizeOptions.hideFooter && gridFooterElement) {
+      gridFooterElement.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -128,11 +129,10 @@ const useGridPrintExport = (apiRef, props) => {
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
-    if (!normalizeOptions.hideFooter) {
+    if (!normalizeOptions.hideFooter && gridFooterElement) {
       // the footer is always being placed at the bottom of the page as if all rows are exported
       // so if getRowsToExport is being used to only export a subset of rows then we need to
       // adjust the footer position to be correctly placed at the bottom of the grid
-      const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
       gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
       gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;

package/node/hooks/features/filter/useGridFilter.js

@@ -237,6 +237,11 @@ const useGridFilter = (apiRef, props) => {
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const filterModelToExport = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+
+    // Remove the additional `fromInput` property from the filter model
+    filterModelToExport.items.forEach(item => {
+      delete item.fromInput;
+    });
     const shouldExportFilterModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
     !context.exportOnlyDirtyModels ||