@mui/x-data-grid 7.1.1 → 7.2.0

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -54,7 +54,8 @@ function GridColumnHeaderItem(props) {
     style,
     pinnedPosition,
     indexInSection,
-    sectionLength
+    sectionLength,
+    gridHasFiller
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -69,7 +70,7 @@ function GridColumnHeaderItem(props) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
   const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, props, {
     classes: rootProps.classes,
     showRightBorder,
@@ -201,6 +202,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   columnMenuOpen: PropTypes.bool.isRequired,
   disableReorder: PropTypes.bool,
   filterItemsCounter: PropTypes.number,
+  gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   headerHeight: PropTypes.number.isRequired,
   indexInSection: PropTypes.number.isRequired,

package/modern/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -48,7 +48,7 @@ function GridColumnHeaderSeparatorRaw(props) {
       className: classes.root,
       style: {
         minHeight: height,
-        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
+        opacity: rootProps.showColumnVerticalBorder ? 1 : 0
       }
     }, other, {
       onClick: stopClick,

package/modern/components/containers/GridRootStyles.js

@@ -151,8 +151,8 @@ export const GridRootStyles = styled('div', {
 }) => {
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
-  const containerBackground = t.vars ? t.vars.palette.background.default : t.palette.background.default;
-  const pinnedBackground = containerBackground;
+  const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
   const overlayBackground = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
@@ -450,7 +450,6 @@ export const GridRootStyles = styled('div', {
       userSelect: 'none'
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
-      overflow: 'initial',
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
@@ -632,6 +631,9 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.filler}`]: {
       flex: 1
+    },
+    [`& .${c['filler--borderTop']}`]: {
+      borderTop: '1px solid var(--DataGrid-rowBorderColor)'
     }
   });
   return gridStyle;

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

@@ -12,6 +12,9 @@ function convertFilterItemValueToInputValue(itemValue, inputType) {
     return '';
   }
   const dateCopy = new Date(itemValue);
+  if (Number.isNaN(dateCopy.getTime())) {
+    return '';
+  }
   // The date picker expects the date to be in the local timezone.
   // But .toISOString() converts it to UTC with zero offset.
   // So we need to subtract the timezone offset.
@@ -48,8 +51,9 @@ function GridFilterInputDate(props) {
     setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const date = new Date(value);
       applyValue(_extends({}, item, {
-        value: new Date(value)
+        value: Number.isNaN(date.getTime()) ? undefined : date
       }));
       setIsApplying(false);
     });

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--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', '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--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', '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--borderTop', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/core/useGridInitialization.js

@@ -15,7 +15,7 @@ export const useGridInitialization = (inputApiRef, props) => {
   useGridRefs(privateApiRef);
   useGridTheme(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
-  useGridStateInitialization(privateApiRef, props);
+  useGridStateInitialization(privateApiRef);
   useGridPipeProcessing(privateApiRef);
   useGridStrategyProcessing(privateApiRef);
   useGridLocaleText(privateApiRef, props);

package/modern/hooks/core/useGridStateInitialization.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridSignature } from '../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
-export const useGridStateInitialization = (apiRef, props) => {
+export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
@@ -62,13 +61,10 @@ export const useGridStateInitialization = (apiRef, props) => {
       const controlState = controlStateMapRef.current[stateId];
       const model = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
-        const details = props.signature === GridSignature.DataGridPro ? {
-          api: apiRef.current,
-          reason
-        } : {
-          reason
-        };
-        controlState.propOnChange(model, details);
+        controlState.propOnChange(model, {
+          reason,
+          api: apiRef.current
+        });
       }
       if (!ignoreSetState) {
         apiRef.current.publishEvent(controlState.changeEvent, model, {
@@ -77,7 +73,7 @@ export const useGridStateInitialization = (apiRef, props) => {
       }
     }
     return !ignoreSetState;
-  }, [apiRef, props.signature]);
+  }, [apiRef]);
   const updateControlState = React.useCallback((key, state, reason) => {
     return apiRef.current.setState(previousState => {
       return _extends({}, previousState, {

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import { styled, useTheme } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -51,6 +52,7 @@ export const useGridColumnHeaders = props => {
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -104,7 +106,7 @@ export const useGridColumnHeaders = props => {
         }
       }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",
-        className: gridClasses.filler
+        className: clsx(gridClasses.filler, borderTop && gridClasses['filler--borderTop'])
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
         borderTop: borderTop,
@@ -165,7 +167,8 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: i,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -275,7 +278,8 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, index);
     });
     return getFillers(params, children, leftOverflow);

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -168,7 +168,9 @@ export const useGridCellEditing = (apiRef, props) => {
   const updateCellModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
-      onCellModesModelChange(newModel, {});
+      onCellModesModelChange(newModel, {
+        api: apiRef.current
+      });
     }
     if (props.cellModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win

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

@@ -242,7 +242,9 @@ export const useGridRowEditing = (apiRef, props) => {
   const updateRowModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
-      onRowModesModelChange(newModel, {});
+      onRowModesModelChange(newModel, {
+        api: apiRef.current
+      });
     }
     if (props.rowModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win

package/modern/hooks/features/export/serializers/csvSerializer.js

@@ -2,12 +2,13 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
   if (typeof value === 'string') {
-    // Make sure value containing delimiter or line break won't be split into multiple rows
-    if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
-      if (shouldAppendQuotes) {
-        return `"${value.replace(/"/g, '""')}"`;
+    if (shouldAppendQuotes) {
+      const escapedValue = value.replace(/"/g, '""');
+      // Make sure value containing delimiter or line break won't be split into multiple rows
+      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+        return `"${escapedValue}"`;
       }
-      return `${value.replace(/"/g, '""')}`;
+      return escapedValue;
     }
     return value;
   }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.1.1
+ * @mui/x-data-grid v7.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/locales/deDE.js

@@ -30,10 +30,9 @@ const deDEGrid = {
   toolbarExportPrint: 'Drucken',
   toolbarExportExcel: 'Download als Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Suche',
+  columnsManagementNoColumns: 'Keine Spalten',
+  columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',

package/modern/locales/frFR.js

@@ -16,7 +16,7 @@ const frFRGrid = {
   // Filters toolbar button text
   toolbarFilters: 'Filtres',
   toolbarFiltersLabel: 'Afficher les filtres',
-  toolbarFiltersTooltipHide: 'Cacher les filtres',
+  toolbarFiltersTooltipHide: 'Masquer les filtres',
   toolbarFiltersTooltipShow: 'Afficher les filtres',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtres actifs` : `${count} filtre actif`,
   // Quick filter toolbar field
@@ -30,10 +30,9 @@ const frFRGrid = {
   toolbarExportPrint: 'Imprimer',
   toolbarExportExcel: 'Télécharger pour Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Rechercher',
+  columnsManagementNoColumns: 'Pas de colonnes',
+  columnsManagementShowHideAllText: 'Afficher/masquer toutes',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelRemoveAll: 'Tout supprimer',
@@ -94,7 +93,7 @@ const frFRGrid = {
   columnMenuShowColumns: 'Afficher les colonnes',
   columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
-  columnMenuHideColumn: 'Cacher',
+  columnMenuHideColumn: 'Masquer',
   columnMenuUnsort: 'Annuler le tri',
   columnMenuSortAsc: 'Tri ascendant',
   columnMenuSortDesc: 'Tri descendant',

package/modern/locales/svSE.js

@@ -30,10 +30,9 @@ const svSEGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Ladda ner som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Sök',
+  columnsManagementNoColumns: 'Inga kolumner',
+  columnsManagementShowHideAllText: 'Visa/Dölj alla',
   // Filter panel text
   filterPanelAddFilter: 'Lägg till filter',
   filterPanelRemoveAll: 'Ta bort alla',

package/modern/utils/cellBorderUtils.js

@@ -1,7 +1,20 @@
 import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
-export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp) => {
+export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp, gridHasFiller) => {
   const isSectionLastCell = indexInSection === sectionLength - 1;
-  return showCellVerticalBorderRootProp && (pinnedPosition !== GridPinnedColumnPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell;
+  if (pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell) {
+    return true;
+  }
+  if (showCellVerticalBorderRootProp) {
+    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+      return true;
+    }
+    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
+      return !isSectionLastCell;
+    }
+    // pinnedPosition === undefined, middle section
+    return !isSectionLastCell || gridHasFiller;
+  }
+  return false;
 };
 export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {
   return pinnedPosition === GridPinnedColumnPosition.RIGHT && indexInSection === 0;

package/node/components/GridRow.js

@@ -101,6 +101,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
@@ -292,7 +293,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength
+      sectionLength: sectionLength,
+      gridHasFiller: gridHasFiller
     }, slotProps?.cell), column.field);
   };
 

package/node/components/cell/GridCell.js

@@ -23,7 +23,7 @@ var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -101,6 +101,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       pinnedPosition,
       sectionIndex,
       sectionLength,
+      gridHasFiller,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -171,7 +172,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isSelectionMode = rootProps.cellSelection ?? false;
   const position = gridPinnedColumnPositionLookup[pinnedPosition];
   const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(position, sectionIndex);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = {
     align,
     showLeftBorder,
@@ -337,6 +338,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
+  gridHasFiller: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -52,7 +52,8 @@ function GridColumnGroupHeader(props) {
     pinnedPosition,
     style,
     indexInSection,
-    sectionLength
+    sectionLength,
+    gridHasFiller
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
@@ -80,7 +81,7 @@ function GridColumnGroupHeader(props) {
     headerComponent = render(renderParams);
   }
   const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
     showLeftBorder,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -62,7 +62,8 @@ function GridColumnHeaderItem(props) {
     style,
     pinnedPosition,
     indexInSection,
-    sectionLength
+    sectionLength,
+    gridHasFiller
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -77,7 +78,7 @@ function GridColumnHeaderItem(props) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
   const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
     showRightBorder,
@@ -209,6 +210,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   columnMenuOpen: _propTypes.default.bool.isRequired,
   disableReorder: _propTypes.default.bool,
   filterItemsCounter: _propTypes.default.number,
+  gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   headerHeight: _propTypes.default.number.isRequired,
   indexInSection: _propTypes.default.number.isRequired,

package/node/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -57,7 +57,7 @@ function GridColumnHeaderSeparatorRaw(props) {
       className: classes.root,
       style: {
         minHeight: height,
-        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
+        opacity: rootProps.showColumnVerticalBorder ? 1 : 0
       }
     }, other, {
       onClick: stopClick,

package/node/components/containers/GridRootStyles.js

@@ -158,8 +158,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
 }) => {
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
-  const containerBackground = t.vars ? t.vars.palette.background.default : t.palette.background.default;
-  const pinnedBackground = containerBackground;
+  const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
   const overlayBackground = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
@@ -457,7 +457,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       userSelect: 'none'
     },
     [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {
-      overflow: 'initial',
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
@@ -639,6 +638,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.filler}`]: {
       flex: 1
+    },
+    [`& .${_gridClasses.gridClasses['filler--borderTop']}`]: {
+      borderTop: '1px solid var(--DataGrid-rowBorderColor)'
     }
   });
   return gridStyle;

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

@@ -21,6 +21,9 @@ function convertFilterItemValueToInputValue(itemValue, inputType) {
     return '';
   }
   const dateCopy = new Date(itemValue);
+  if (Number.isNaN(dateCopy.getTime())) {
+    return '';
+  }
   // The date picker expects the date to be in the local timezone.
   // But .toISOString() converts it to UTC with zero offset.
   // So we need to subtract the timezone offset.
@@ -57,8 +60,9 @@ function GridFilterInputDate(props) {
     setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const date = new Date(value);
       applyValue((0, _extends2.default)({}, item, {
-        value: new Date(value)
+        value: Number.isNaN(date.getTime()) ? undefined : date
       }));
       setIsApplying(false);
     });

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', '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--borderTop', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/hooks/core/useGridInitialization.js

@@ -20,7 +20,7 @@ const useGridInitialization = (inputApiRef, props) => {
   (0, _useGridRefs.useGridRefs)(privateApiRef);
   (0, _useGridTheme.useGridTheme)(privateApiRef);
   (0, _useGridLoggerFactory.useGridLoggerFactory)(privateApiRef, props);
-  (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef, props);
+  (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef);
   (0, _pipeProcessing.useGridPipeProcessing)(privateApiRef);
   (0, _strategyProcessing.useGridStrategyProcessing)(privateApiRef);
   (0, _useGridLocaleText.useGridLocaleText)(privateApiRef, props);

package/node/hooks/core/useGridStateInitialization.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridStateInitialization = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useGridStateInitialization = (apiRef, props) => {
+const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
@@ -71,13 +70,10 @@ const useGridStateInitialization = (apiRef, props) => {
       const controlState = controlStateMapRef.current[stateId];
       const model = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
-        const details = props.signature === _useGridApiEventHandler.GridSignature.DataGridPro ? {
-          api: apiRef.current,
-          reason
-        } : {
-          reason
-        };
-        controlState.propOnChange(model, details);
+        controlState.propOnChange(model, {
+          reason,
+          api: apiRef.current
+        });
       }
       if (!ignoreSetState) {
         apiRef.current.publishEvent(controlState.changeEvent, model, {
@@ -86,7 +82,7 @@ const useGridStateInitialization = (apiRef, props) => {
       }
     }
     return !ignoreSetState;
-  }, [apiRef, props.signature]);
+  }, [apiRef]);
   const updateControlState = React.useCallback((key, state, reason) => {
     return apiRef.current.setState(previousState => {
       return (0, _extends2.default)({}, previousState, {