@mui/x-data-grid 6.13.0 → 6.15.0

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/GridPanelWrapper.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -40,7 +40,7 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(TrapFocus, _extends({
+  return /*#__PURE__*/_jsx(FocusTrap, _extends({
     open: true,
     disableEnforceFocus: true,
     isEnabled: isEnabled

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

@@ -1,9 +1,9 @@
 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 { unstable_useId as useId } from '@mui/utils';
+import { refType, unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -94,9 +94,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any.isRequired
-  })]),
+  focusElementRef: refType,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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);

package/modern/hooks/features/index.js

@@ -12,4 +12,5 @@ export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';
-export * from './headerFiltering';
+export * from './headerFiltering';
+export * from './virtualization';

package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -0,0 +1,18 @@
+import { createSelector } from '../../../utils/createSelector';
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+export const gridVirtualizationSelector = state => state.virtualization;
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabled);
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForColumns);

package/modern/hooks/features/virtualization/index.js

@@ -0,0 +1,2 @@
+export * from './useGridVirtualization';
+export * from './gridVirtualizationSelectors';