@mui/x-data-grid 7.0.0-beta.1 → 7.0.0-beta.3

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", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -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);
 };
@@ -69,6 +67,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       renderedColumns,
       pinnedColumns,
+      offsets,
       dimensions,
       firstColumnToRender,
       isFirstVisible,
@@ -273,7 +272,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         width: width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: column.align ?? 'left'
       }, column.field);
     }
     const {
@@ -361,7 +360,13 @@ 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", {
+      role: "presentation",
+      className: gridClasses.cellOffsetLeft,
+      style: {
+        width: offsets.left
+      }
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",
@@ -429,6 +434,10 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
+  offsets: PropTypes.shape({
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired
+  }).isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,

package/modern/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/modern/components/base/GridFooterPlaceholder.js

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

package/modern/components/cell/GridActionsCell.js

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

package/modern/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,20 +10,17 @@ 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) {
+    const {
+        label,
+        icon,
+        onClick
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const handleClick = event => {
+      onClick?.(event);
+    };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
       size: "small",
@@ -36,10 +34,24 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       })
     }));
   }
+  const {
+      label,
+      icon,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const handleClick = event => {
+    onClick?.(event);
+    if (closeMenuOnClick) {
+      closeMenu?.();
+    }
+  };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
     ref: ref
   }, other, {
-    onClick: onClick,
+    onClick: handleClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

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

package/modern/components/containers/GridRootStyles.js

@@ -192,8 +192,6 @@ export const GridRootStyles = styled('div', {
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
     '--DataGrid-hasScrollY': '0',
-    '--DataGrid-offsetTop': '0px',
-    '--DataGrid-offsetLeft': '0px',
     '--DataGrid-scrollbarSize': '10px',
     '--DataGrid-rowWidth': '0px',
     '--DataGrid-columnsTotalWidth': '0px',
@@ -240,6 +238,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 +558,9 @@ 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'
     },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',

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", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
@@ -24,7 +24,8 @@ function GridFilterInputBoolean(props) {
       focusElementRef,
       clearButton,
       tabIndex,
-      label: labelProp
+      label: labelProp,
+      variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -51,7 +52,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: labelId,
@@ -59,14 +60,15 @@ function GridFilterInputBoolean(props) {
         label: label,
         value: filterValueState,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
+        notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
         inputProps: {
           ref: focusElementRef,
           tabIndex
         }
-      }, others, baseSelectProps, {
+      }, others /* FIXME: typing error */, baseSelectProps, {
         children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",

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", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -50,6 +50,7 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
+      variant = 'standard',
       clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
@@ -90,7 +91,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -98,15 +99,16 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
         type: type || 'text',
         inputProps: {
           tabIndex,
           ref: focusElementRef,
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
-        native: isSelectNative
-      }, others, rootProps.slotProps?.baseSelect, {
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
+      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,

package/modern/components/panel/filterPanel/GridFilterInputValue.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", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -17,7 +17,8 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
-      InputProps
+      InputProps,
+      variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
@@ -52,7 +53,7 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
+    variant: variant,
     type: type || 'text',
     InputProps: _extends({}, applying || clearButton ? {
       endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {

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

@@ -130,7 +130,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/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,6 +5,9 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridOffsetsSelector } from '../../hooks/features/virtualization';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,20 +28,24 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column',
-  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
+  flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: rootProps
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsets.top}px, 0)`
+    }
   }, other));
 });
 export { GridVirtualScrollerRenderZone };

package/modern/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/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
+import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { gridDimensionsSelector } from '../dimensions';
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridOffsetsSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
@@ -24,19 +25,11 @@ const SpaceFiller = styled('div')({
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
-  overridesResolver: (props, styles) => styles.columnHeaderRow
-})(({
-  ownerState: {
-    params: {
-      position
-    } = {},
-    leftOverflow = 0
-  }
-}) => ({
+  overridesResolver: (_, styles) => styles.columnHeaderRow
+})({
   display: 'flex',
-  height: 'var(--DataGrid-headerHeight)',
-  transform: position === undefined ? `translate3d(${leftOverflow !== 0 ? `calc(var(--DataGrid-offsetLeft) - ${leftOverflow}px)` : 'var(--DataGrid-offsetLeft)'}, 0, 0)` : undefined
-}));
+  height: 'var(--DataGrid-headerHeight)'
+});
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -56,10 +49,12 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
@@ -90,11 +85,18 @@ export const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFiller = (params, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && params?.position === undefined;
+    const isNotPinned = params?.position === undefined;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsets.left - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [params?.position === undefined && /*#__PURE__*/_jsx(SpaceFiller, {
+      children: [isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/_jsx(SpaceFiller, {
         className: gridClasses.columnHeader
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
@@ -128,13 +130,11 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: {
-        params
-      },
-      children: [columns, getFiller(params)]
+      ownerState: rootProps,
+      children: getFillers(params, columns, 0)
     });
   };
   const getColumnGroupHeaders = params => {
@@ -200,41 +200,39 @@ export const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      const children = depthInfo.elements.map(({
+        groupId,
+        width,
+        fields,
+        colIndex,
+        hasFocus,
+        tabIndex
+      }, groupIndex) => {
+        return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+          groupId: groupId,
+          width: width,
+          fields: fields,
+          colIndex: colIndex,
+          depth: depthIndex,
+          isLastColumn: colIndex === visibleColumns.length - fields.length,
+          maxDepth: headerToRender.length,
+          height: dimensions.headerHeight,
+          hasFocus: hasFocus,
+          tabIndex: tabIndex
+        }, groupIndex);
+      });
+      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: {
-          params,
-          leftOverflow: depthInfo.leftOverflow
-        },
-        children: [depthInfo.elements.map(({
-          groupId,
-          width,
-          fields,
-          colIndex,
-          hasFocus,
-          tabIndex
-        }, groupIndex) => {
-          return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
-            groupId: groupId,
-            width: width,
-            fields: fields,
-            colIndex: colIndex,
-            depth: depthIndex,
-            isLastColumn: colIndex === visibleColumns.length - fields.length,
-            maxDepth: headerToRender.length,
-            height: dimensions.headerHeight,
-            hasFocus: hasFocus,
-            tabIndex: tabIndex
-          }, groupIndex);
-        }), getFiller(params)]
+        ownerState: rootProps,
+        children: getFillers(params, children, depthInfo.leftOverflow)
       }, depthIndex));
     });
     return columns;
   };
   return {
     renderContext,
-    getFiller,
+    getFillers,
     getColumnHeaders,
     getColumnsToRender,
     getColumnGroupHeaders,

package/modern/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/modern/hooks/features/rows/useGridRows.js

@@ -121,7 +121,7 @@ export const useGridRows = (apiRef, props) => {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
-      throw new Error(["MUI X: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     const nonPinnedRowsUpdates = [];
     updates.forEach(update => {
@@ -246,7 +246,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
     if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
-      throw new Error(["MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
       return;

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

@@ -24,6 +24,13 @@ export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtua
  */
 export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
 
+/**
+ * Get the offsets
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridOffsetsSelector = createSelector(gridVirtualizationSelector, state => state.offsets);
+
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.