@mui/x-data-grid 7.0.0-beta.0 → 7.0.0-beta.2

package/components/GridPagination.js

@@ -24,6 +24,9 @@ const GridPaginationRoot = styled(TablePagination)(({
     }
   }
 }));
+
+// A mutable version of a readonly array.
+
 export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -33,7 +36,10 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     var _ref, _rootProps$rowCount;
     return (_ref = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref : 0;
   }, [rootProps.rowCount, visibleTopLevelRowCount]);
-  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const lastPage = React.useMemo(() => {
+    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
+    return Math.max(0, calculatedValue);
+  }, [rowCount, paginationModel.pageSize]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);
     apiRef.current.setPageSize(pageSize);
@@ -69,7 +75,11 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,

package/components/GridRow.js

@@ -37,9 +37,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
-    pinnedLeft: ['pinnedLeft'],
-    pinnedRight: ['pinnedRight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -268,6 +266,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         break;
     }
     if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
+      var _column$align;
       const {
         width
       } = cellColSpanInfo.cellProps;
@@ -276,7 +275,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         width: width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: (_column$align = column.align) != null ? _column$align : 'left'
       }, column.field);
     }
     const {
@@ -364,7 +363,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/_jsx("div", {
+      className: gridClasses.cellOffsetLeft,
+      role: "presentation"
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",

package/components/GridScrollbarFillerCell.js

@@ -21,9 +21,6 @@ const Style = styled('div')({
   [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
     position: 'sticky',
     right: 0
-  },
-  [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: {
-    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
   }
 });
 function GridScrollbarFillerCell({

package/components/base/GridFooterPlaceholder.js

@@ -8,5 +8,5 @@ export function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer /* FIXME: typing error */));
 }

package/components/cell/GridActionsCell.js

@@ -138,7 +138,7 @@ function GridActionsCell(props) {
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+    if (['Tab', 'Escape'].includes(event.key)) {
       hideMenu();
     }
   };
@@ -175,7 +175,6 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,
@@ -184,7 +183,8 @@ function GridActionsCell(props) {
         variant: "menu",
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index
+          key: index,
+          closeMenu: hideMenu
         }))
       })
     })]

package/components/cell/GridActionsCellItem.d.ts

@@ -11,6 +11,12 @@ export type GridActionsCellItemProps = {
     icon: React.ReactElement;
 } & IconButtonProps) | ({
     showInMenu: true;
+    /**
+     * If false, the menu will not close when this item is clicked.
+     * @default true
+     */
+    closeMenuOnClick?: boolean;
+    closeMenu?: () => void;
 } & MenuItemProps));
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
     label: string;
@@ -31,9 +37,15 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & {
     showInMenu: true;
+    /**
+     * If false, the menu will not close when this item is clicked.
+     * @default true
+     */
+    closeMenuOnClick?: boolean | undefined;
+    closeMenu?: (() => void) | undefined;
 } & import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
 }, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef"> & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+}, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["label", "icon", "showInMenu", "onClick"];
+const _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,21 +10,18 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      label,
-      icon,
-      showInMenu,
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const handleClick = event => {
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  if (!showInMenu) {
+  if (!props.showInMenu) {
     var _rootProps$slotProps;
+    const {
+        label,
+        icon,
+        onClick
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const handleClick = event => {
+      onClick == null || onClick(event);
+    };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
       size: "small",
@@ -37,10 +35,24 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       })
     }));
   }
+  const {
+      label,
+      icon,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const handleClick = event => {
+    onClick == null || onClick(event);
+    if (closeMenuOnClick) {
+      closeMenu == null || closeMenu();
+    }
+  };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
     ref: ref
   }, other, {
-    onClick: onClick,
+    onClick: handleClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]

package/components/cell/GridEditInputCell.js

@@ -57,7 +57,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
     if (column.valueParser) {
-      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);
     apiRef.current.setEditCellValue({

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -86,7 +86,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     },
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
-    touchRippleRef: rippleRef
+    touchRippleRef: rippleRef /* FIXME: typing error */
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {

package/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../../models/gridRows").GridValidRowModel, any, any> & React.RefAttributes<HTMLInputElement>>;
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../../models/gridRows").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
 export { GridHeaderCheckbox };

package/components/columnsManagement/GridColumnsManagement.d.ts

@@ -20,6 +20,13 @@ export interface GridColumnsManagementProps {
      * @default false
      */
     disableResetButton?: boolean;
+    /**
+     * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+     * - `all`: Will toggle all columns.
+     * - `filteredOnly`: Will only toggle columns that match the search criteria.
+     * @default 'all'
+     */
+    toggleAllMode?: 'all' | 'filteredOnly';
     /**
      * Returns the list of togglable columns.
      * If used, only those columns will be displayed in the panel

package/components/columnsManagement/GridColumnsManagement.js

@@ -43,6 +43,7 @@ function GridColumnsManagement(props) {
     autoFocusSearchField = true,
     disableShowHideToggle = false,
     disableResetButton = false,
+    toggleAllMode = 'all',
     getTogglableColumns
   } = props;
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
@@ -62,11 +63,21 @@ function GridColumnsManagement(props) {
     } = event.target;
     apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
   };
+  const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const toggleAllColumns = React.useCallback(isVisible => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     const newModel = _extends({}, currentModel);
     const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    columns.forEach(col => {
+    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
       if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
         if (isVisible) {
           // delete the key from the model instead of setting it to `true`
@@ -77,20 +88,10 @@ function GridColumnsManagement(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns]);
+  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);
   }, []);
-  const currentColumns = React.useMemo(() => {
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
-      field
-    }) => togglableColumns.includes(field)) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
   const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
   const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
@@ -164,14 +165,11 @@ function GridColumnsManagement(props) {
           checked: allHideableColumnsVisible,
           indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
           onClick: () => toggleAllColumns(!allHideableColumnsVisible),
-          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
-        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
-        sx: {
-          [`.MuiFormControlLabel-label`]: {
-            textTransform: 'uppercase',
-            fontSize: '14px'
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+          sx: {
+            p: 0.5
           }
-        },
+        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
       }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
@@ -213,7 +211,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    */
   getTogglableColumns: PropTypes.func,
   searchPredicate: PropTypes.func,
-  sort: PropTypes.oneOf(['asc', 'desc'])
+  sort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode: PropTypes.oneOf(['all', 'filteredOnly'])
 } : void 0;
 const GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
@@ -246,7 +251,7 @@ const GridColumnsManagementFooter = styled('div', {
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 2.4),
+  padding: theme.spacing(0.5, 1, 0.5, 3),
   display: 'flex',
   justifyContent: 'space-between',
   borderTop: `1px solid ${theme.palette.divider}`

package/components/columnsManagement/utils.d.ts

@@ -1,4 +1,4 @@
 import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
-import { GridColumnsManagementProps } from './GridColumnsManagement';
+import type { GridColumnsManagementProps } from './GridColumnsManagement';
 export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
 export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/components/containers/GridRootStyles.js

@@ -240,6 +240,12 @@ export const GridRootStyles = styled('div', {
       [`& .${c.cell} > *`]: {
         overflow: 'visible !important',
         whiteSpace: 'nowrap'
+      },
+      [`& .${c.groupingCriteriaCell}`]: {
+        width: 'unset'
+      },
+      [`& .${c.treeDataGroupingCell}`]: {
+        width: 'unset'
       }
     },
     [`& .${c.columnHeader}, & .${c.cell}`]: {
@@ -554,8 +560,10 @@ export const GridRootStyles = styled('div', {
         }
       }
     },
-    [`& .${c.cell}:not(.${c['cell--pinnedLeft']}):not(.${c['cell--pinnedRight']})`]: {
-      transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+    [`& .${c.cellOffsetLeft}`]: {
+      flex: '0 0 auto',
+      display: 'inline-block',
+      width: 'var(--DataGrid-offsetLeft)'
     },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -67,7 +67,7 @@ function GridFilterInputBoolean(props) {
           ref: focusElementRef,
           tabIndex
         }
-      }, others, baseSelectProps, {
+      }, others /* FIXME: typing error */, baseSelectProps, {
         children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -107,7 +107,7 @@ function GridFilterInputSingleSelect(props) {
           placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
         native: isSelectNative
-      }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+      }, others /* FIXME: typing error */, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,

package/components/panel/filterPanel/GridFilterPanel.js

@@ -134,7 +134,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     }
     return apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: readOnlyFilters
-    }));
+    }), 'removeAllFilterItems');
   }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(() => {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {

package/constants/gridClasses.d.ts

@@ -107,6 +107,11 @@ export interface GridClasses {
      * Styles applied to the skeleton cell element.
      */
     cellSkeleton: string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the left offset cell element.
+     */
+    cellOffsetLeft: string;
     /**
      * Styles applied to the selection checkbox element.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/features/columns/useGridColumnSpanning.js

@@ -60,7 +60,9 @@ function calculateCellColSpan(params) {
   } = params;
   const columnsLength = columns.length;
   const column = columns[columnIndex];
-  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  const row = apiRef.current.getRow(rowId);
+  const value = apiRef.current.getRowValue(row, column);
+  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
   if (!colSpan || colSpan === 1) {
     setCellColSpanInfo(lookup, rowId, columnIndex, {
       spannedByColSpan: false,

package/hooks/features/editing/useGridCellEditing.js

@@ -335,7 +335,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
     let newProps = _extends({}, editingState[id][field], {
@@ -383,10 +383,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       value
     } = editingState[id][field];
-    return column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : _extends({}, row, {
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, {
       [field]: value
     });
   }, [apiRef]);

package/hooks/features/editing/useGridRowEditing.js

@@ -410,7 +410,7 @@ export const useGridRowEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
     let newProps = _extends({}, editingState[id][field], {
@@ -510,10 +510,7 @@ export const useGridRowEditing = (apiRef, props) => {
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
       if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
+        rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;
       }

package/hooks/features/filter/gridFilterUtils.js

@@ -89,7 +89,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   if (column.valueParser) {
     var _filterItem$value;
     const parser = column.valueParser;
-    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }

package/hooks/features/rows/gridRowsUtils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { gridDimensionsSelector } from '../dimensions';
+import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export const buildRootGroup = () => ({

package/hooks/features/rows/useGridParamsApi.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 export declare class MissingRowIdError extends Error {
 }
 /**
@@ -11,4 +10,4 @@ export declare class MissingRowIdError extends Error {
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export declare function useGridParamsApi(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowId'>): void;
+export declare function useGridParamsApi(apiRef: React.MutableRefObject<GridPrivateApiCommunity>): void;