@mui/x-data-grid 6.14.0 → 6.15.0

package/modern/DataGrid/useDataGridComponent.js

@@ -25,53 +25,56 @@ import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/row
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+import { useGridVirtualization, virtualizationStateInitializer } from '../hooks/features/virtualization';
 export const useDataGridComponent = (inputApiRef, props) => {
-  const privateApiRef = useGridInitialization(inputApiRef, props);
+  const apiRef = useGridInitialization(inputApiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
    */
-  useGridRowSelectionPreProcessors(privateApiRef, props);
-  useGridRowsPreProcessors(privateApiRef);
+  useGridRowSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
 
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(rowSelectionStateInitializer, privateApiRef, props);
-  useGridInitializeState(columnsStateInitializer, privateApiRef, props);
-  useGridInitializeState(rowsStateInitializer, privateApiRef, props);
-  useGridInitializeState(editingStateInitializer, privateApiRef, props);
-  useGridInitializeState(focusStateInitializer, privateApiRef, props);
-  useGridInitializeState(sortingStateInitializer, privateApiRef, props);
-  useGridInitializeState(preferencePanelStateInitializer, privateApiRef, props);
-  useGridInitializeState(filterStateInitializer, privateApiRef, props);
-  useGridInitializeState(densityStateInitializer, privateApiRef, props);
-  useGridInitializeState(paginationStateInitializer, privateApiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, privateApiRef, props);
-  useGridInitializeState(columnMenuStateInitializer, privateApiRef, props);
-  useGridInitializeState(columnGroupsStateInitializer, privateApiRef, props);
-  useGridKeyboardNavigation(privateApiRef, props);
-  useGridRowSelection(privateApiRef, props);
-  useGridColumns(privateApiRef, props);
-  useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef, props);
-  useGridColumnSpanning(privateApiRef);
-  useGridColumnGrouping(privateApiRef, props);
-  useGridEditing(privateApiRef, props);
-  useGridFocus(privateApiRef, props);
-  useGridPreferencesPanel(privateApiRef, props);
-  useGridFilter(privateApiRef, props);
-  useGridSorting(privateApiRef, props);
-  useGridDensity(privateApiRef, props);
-  useGridPagination(privateApiRef, props);
-  useGridRowsMeta(privateApiRef, props);
-  useGridScroll(privateApiRef, props);
-  useGridColumnMenu(privateApiRef);
-  useGridCsvExport(privateApiRef, props);
-  useGridPrintExport(privateApiRef, props);
-  useGridClipboard(privateApiRef, props);
-  useGridDimensions(privateApiRef, props);
-  useGridEvents(privateApiRef, props);
-  useGridStatePersistence(privateApiRef);
-  return privateApiRef;
+  useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
+  useGridRowSelection(apiRef, props);
+  useGridColumns(apiRef, props);
+  useGridRows(apiRef, props);
+  useGridParamsApi(apiRef, props);
+  useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
+  useGridEditing(apiRef, props);
+  useGridFocus(apiRef, props);
+  useGridPreferencesPanel(apiRef, props);
+  useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
+  useGridDensity(apiRef, props);
+  useGridPagination(apiRef, props);
+  useGridRowsMeta(apiRef, props);
+  useGridScroll(apiRef, props);
+  useGridColumnMenu(apiRef);
+  useGridCsvExport(apiRef, props);
+  useGridPrintExport(apiRef, props);
+  useGridClipboard(apiRef, props);
+  useGridDimensions(apiRef, props);
+  useGridEvents(apiRef, props);
+  useGridStatePersistence(apiRef);
+  useGridVirtualization(apiRef, props);
+  return apiRef;
 };

package/modern/components/DataGridVirtualScroller.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "disableVirtualization"];
+const _excluded = ["className"];
 import * as React from 'react';
 import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
 import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
@@ -11,8 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
   const {
-      className,
-      disableVirtualization
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -21,8 +20,7 @@ const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridV
     getRenderZoneProps,
     getRows
   } = useGridVirtualScroller({
-    ref,
-    disableVirtualization
+    ref
   });
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({
     className: className

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -57,6 +57,7 @@ function EmptyCell({
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
+      hovered,
       rowId,
       row,
       index,
@@ -92,6 +93,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
   const ownerState = {
     selected,
+    hovered,
     isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
@@ -326,7 +328,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx(...rowClassNames, classes.root, className),
+    className: clsx(...rowClassNames, classes.root, className, hovered && 'Mui-hovered'),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style

package/modern/components/base/GridBody.js

@@ -39,7 +39,6 @@ function GridBody(props) {
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   useEnhancedEffect(() => {
     apiRef.current.computeSizeAndPublishResizeEvent();
     const elementToObserve = rootRef.current;
@@ -49,7 +48,7 @@ function GridBody(props) {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         apiRef.current.computeSizeAndPublishResizeEvent();
       });
     });
@@ -65,24 +64,6 @@ function GridBody(props) {
       }
     };
   }, [apiRef]);
-  const disableVirtualization = React.useCallback(() => {
-    setIsVirtualizationDisabled(true);
-  }, []);
-  const enableVirtualization = React.useCallback(() => {
-    setIsVirtualizationDisabled(false);
-  }, []);
-  React.useEffect(() => {
-    setIsVirtualizationDisabled(rootProps.disableVirtualization);
-  }, [rootProps.disableVirtualization]);
-
-  // The `useGridApiMethod` hook can't be used here, because it only installs the
-  // method if it doesn't exist yet. Once installed, it's never updated again.
-  // This break the methods above, since their closure comes from the first time
-  // they were installed. Which means that calling `setIsVirtualizationDisabled`
-  // will trigger a re-render, but it won't update the state. That can be solved
-  // by migrating the virtualization status to the global state.
-  apiRef.current.unstable_disableVirtualization = disableVirtualization;
-  apiRef.current.unstable_enableVirtualization = enableVirtualization;
   const columnHeadersRef = React.useRef(null);
   const columnsContainerRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
@@ -119,8 +100,7 @@ function GridBody(props) {
     // If this event is published while dimensions haven't been computed,
     // the `onFetchRows` prop won't be called during mount.
     , {
-      ref: virtualScrollerRef,
-      disableVirtualization: isVirtualizationDisabled
+      ref: virtualScrollerRef
     }), children]
   });
 }

package/modern/components/cell/GridActionsCell.js

@@ -164,11 +164,11 @@ function GridActionsCell(props) {
         fontSize: "small"
       })
     })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
-      onClickAway: hideMenu,
-      onClick: hideMenu,
       open: open,
       target: buttonRef.current,
       position: position,
+      onClose: hideMenu,
+      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,

package/modern/components/cell/GridCell.js

@@ -231,7 +231,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       return {
         padding: 0,
         opacity: 0,
-        width: 0
+        width: 0,
+        border: 0
       };
     }
     const cellStyle = {
@@ -495,7 +496,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       return {
         padding: 0,
         opacity: 0,
-        width: 0
+        width: 0,
+        border: 0
       };
     }
     const cellStyle = {

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -94,7 +94,8 @@ function GridColumnHeaderItem(props) {
     onDragEnd: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
-    onMouseDown: publish('columnSeparatorMouseDown')
+    onMouseDown: publish('columnSeparatorMouseDown'),
+    onDoubleClick: publish('columnSeparatorDoubleClick')
   }), [publish]);
   React.useEffect(() => {
     if (!showColumnMenuIcon) {

package/modern/components/menu/GridMenu.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["open", "target", "onClickAway", "children", "position", "className", "onExited"];
+const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { unstable_composeClasses as composeClasses, HTMLElementType } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
 import Grow from '@mui/material/Grow';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
@@ -43,7 +43,7 @@ function GridMenu(props) {
   const {
       open,
       target,
-      onClickAway,
+      onClose,
       children,
       position,
       className,
@@ -53,6 +53,15 @@ function GridMenu(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const savedFocusRef = React.useRef(null);
+  useEnhancedEffect(() => {
+    if (open) {
+      savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    } else {
+      savedFocusRef.current?.focus?.();
+      savedFocusRef.current = null;
+    }
+  }, [open]);
   React.useEffect(() => {
     // Emit menuOpen or menuClose events
     const eventName = open ? 'menuOpen' : 'menuClose';
@@ -68,6 +77,12 @@ function GridMenu(props) {
       onExited(node);
     }
   };
+  const handleClickAway = event => {
+    if (event.target && (target === event.target || target?.contains(event.target))) {
+      return;
+    }
+    onClose(event);
+  };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.slots.basePopper,
     className: clsx(className, classes.root),
@@ -81,7 +96,7 @@ function GridMenu(props) {
       TransitionProps,
       placement
     }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-      onClickAway: onClickAway,
+      onClickAway: handleClickAway,
       mouseEvent: "onMouseDown",
       children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
         style: {
@@ -101,7 +116,7 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  onClickAway: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   onExited: PropTypes.func,
   /**
    * If `true`, the component is shown.

package/modern/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { HTMLElementType } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, HTMLElementType } from '@mui/utils';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../GridMenu';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,13 +17,16 @@ function GridColumnHeaderMenu({
 }) {
   const apiRef = useGridApiContext();
   const colDef = apiRef.current.getColumn(field);
-  const hideMenu = React.useCallback(event => {
-    // Prevent triggering the sorting
-    event.stopPropagation();
-    if (!target?.contains(event.target)) {
-      apiRef.current.hideColumnMenu();
+  const hideMenu = useEventCallback(event => {
+    if (event) {
+      // Prevent triggering the sorting
+      event.stopPropagation();
+      if (target?.contains(event.target)) {
+        return;
+      }
     }
-  }, [apiRef, target]);
+    apiRef.current.hideColumnMenu();
+  });
   if (!target || !colDef) {
     return null;
   }
@@ -31,7 +34,7 @@ function GridColumnHeaderMenu({
     placement: `bottom-${colDef.align === 'right' ? 'start' : 'end'}`,
     open: open,
     target: target,
-    onClickAway: hideMenu,
+    onClose: hideMenu,
     onExited: onExited,
     children: /*#__PURE__*/_jsx(ContentComponent, _extends({
       colDef: colDef,

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -55,12 +55,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     setOpen(prevOpen => !prevOpen);
     onClick?.(event);
   };
-  const handleDensitySelectorClickAway = event => {
-    if (buttonRef.current === event.target ||
-    // if user clicked on the icon
-    buttonRef.current?.contains(event.target)) {
-      return;
-    }
+  const handleDensitySelectorClose = () => {
     setOpen(false);
   };
   const handleDensityUpdate = newDensity => {
@@ -104,7 +99,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClickAway,
+      onClose: handleDensitySelectorClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -37,14 +37,6 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       handleMenuClose();
     }
   };
-  const handleMenuClickAway = event => {
-    if (buttonRef.current === event.target ||
-    // if user clicked on the icon
-    buttonRef.current?.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
   if (children == null) {
     return null;
   }
@@ -65,7 +57,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClickAway,
+      onClose: handleMenuClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: exportMenuId,

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, useTheme } from '@mui/system';
 import { defaultMemoize } from 'reselect';
+import { useGridSelector } from '../../utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -11,6 +12,7 @@ import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColu
 import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { areRenderContextsEqual, getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
+import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridColumnHeaderRow = styled('div', {
@@ -46,6 +48,7 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -163,7 +166,7 @@ export const useGridColumnHeaders = props => {
       maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     });
-    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+    const firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
       firstColumnIndex: nextRenderContext.firstColumnIndex,
       minColumnIndex: minFirstColumn,
       columnBuffer: rootProps.columnBuffer,
@@ -172,7 +175,7 @@ export const useGridColumnHeaders = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
-    const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

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

@@ -12,6 +12,7 @@ import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function raf() {
   return new Promise(resolve => {
@@ -40,13 +41,14 @@ export const useGridPrintExport = (apiRef, props) => {
   const doc = React.useRef(null);
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
+  const previousRows = React.useRef([]);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef]);
 
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly
-  const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
+  const updateGridColumnsForPrint = React.useCallback((fields, allColumns, includeCheckboxes) => new Promise(resolve => {
     const exportedColumnFields = getColumnsToExport({
       apiRef,
       options: {
@@ -59,14 +61,25 @@ export const useGridPrintExport = (apiRef, props) => {
     columns.forEach(column => {
       newColumnVisibilityModel[column.field] = exportedColumnFields.includes(column.field);
     });
+    if (includeCheckboxes) {
+      newColumnVisibilityModel[GRID_CHECKBOX_SELECTION_COL_DEF.field] = true;
+    }
     apiRef.current.setColumnVisibilityModel(newColumnVisibilityModel);
     resolve();
   }), [apiRef]);
+  const updateGridRowsForPrint = React.useCallback(getRowsToExport => {
+    const rowsToExportIds = getRowsToExport({
+      apiRef
+    });
+    const newRows = rowsToExportIds.map(id => apiRef.current.getRow(id));
+    apiRef.current.setRows(newRows);
+  }, [apiRef]);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
     const normalizeOptions = _extends({
       copyStyles: true,
       hideToolbar: false,
-      hideFooter: false
+      hideFooter: false,
+      includeCheckboxes: false
     }, options);
     const printDoc = printWindow.contentDocument;
     if (!printDoc) {
@@ -97,10 +110,21 @@ export const useGridPrintExport = (apiRef, props) => {
     }
 
     // Expand container height to accommodate all rows
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight}px`;
+    const computedTotalHeight = rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight;
+    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';
 
+    // 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
+    if (options?.getRowsToExport) {
+      const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
+      gridFooterElement.style.position = 'absolute';
+      gridFooterElement.style.width = '100%';
+      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    }
+
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
     // prevents us to do it
     const container = document.createElement('div');
@@ -173,11 +197,13 @@ export const useGridPrintExport = (apiRef, props) => {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }
-    apiRef.current.unstable_enableVirtualization();
+    apiRef.current.unstable_setVirtualization(true);
+    apiRef.current.setRows(previousRows.current);
 
     // Clear local state
     previousGridState.current = null;
     previousColumnVisibility.current = {};
+    previousRows.current = [];
   }, [apiRef]);
   const exportDataAsPrint = React.useCallback(async options => {
     logger.debug(`Export data as Print`);
@@ -187,6 +213,7 @@ export const useGridPrintExport = (apiRef, props) => {
     previousGridState.current = apiRef.current.exportState();
     // It appends that the visibility model is not exported, especially if columnVisibility is not controlled
     previousColumnVisibility.current = gridColumnVisibilityModelSelector(apiRef);
+    previousRows.current = apiRef.current.getSortedRows();
     if (props.pagination) {
       const visibleRowCount = gridExpandedRowCountSelector(apiRef);
       const paginationModel = {
@@ -198,8 +225,11 @@ export const useGridPrintExport = (apiRef, props) => {
       mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
       apiRef.current.forceUpdate();
     }
-    await updateGridColumnsForPrint(options?.fields, options?.allColumns);
-    apiRef.current.unstable_disableVirtualization();
+    await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
+    if (options?.getRowsToExport) {
+      updateGridRowsForPrint(options.getRowsToExport);
+    }
+    apiRef.current.unstable_setVirtualization(false);
     await raf(); // wait for the state changes to take action
     const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {
@@ -220,7 +250,7 @@ export const useGridPrintExport = (apiRef, props) => {
       };
       doc.current.body.appendChild(printWindow);
     }
-  }, [props, logger, apiRef, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint]);
+  }, [props, logger, apiRef, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint, updateGridRowsForPrint]);
   const printExportApi = {
     exportDataAsPrint
   };

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -4,10 +4,13 @@ import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
+
+// Fixes https://github.com/mui/mui-x/issues/10056
+const global = typeof window === 'undefined' ? globalThis : window;
+const evalCode = global[atob('ZXZhbA==')];
 let hasEval;
 try {
-  // eslint-disable-next-line no-eval
-  hasEval = eval('true');
+  hasEval = evalCode('true');
 } catch (_) {
   hasEval = false;
 }
@@ -157,7 +160,7 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
-  const filterItemTemplate = `(function filterItem$$(row, shouldApplyFilter) {
+  const filterItemTemplate = `(function filterItem$$(appliers, row, shouldApplyFilter) {
       ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 
       const result$$ = {
@@ -169,9 +172,10 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
 
       return result$$;
     })`;
-
-  // eslint-disable-next-line no-eval
-  const filterItem = eval(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  const filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  const filterItem = (row, shouldApplyItem) => {
+    return filterItemCore(appliers, row, shouldApplyItem);
+  };
   filterItemsApplierId += 1;
   return filterItem;
 };

package/modern/hooks/features/focus/useGridFocus.js

@@ -382,7 +382,6 @@ export const useGridFocus = (apiRef, props) => {
     };
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
-  useGridApiEventHandler(apiRef, 'headerFilterBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);