@mui/x-data-grid 6.10.0 → 6.10.2

package/CHANGELOG.md

@@ -3,6 +3,139 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.10.2
+
+_Jul 27, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve scatter charts performance
+- 📚 Redesigned component API documentation and side navigation
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.2`
+
+- [DataGrid] Fix quick filter & aggregation error (#9729) @romgrk
+- [DataGrid] Fix row click propagation causing error in nested grid (#9741) @cherniavskii
+- [DataGrid] Keep focused cell in the DOM (#7357) @yaredtsy
+- [l10n] Improve Finnish (fi-FI) locale (#9746) @sambbaahh
+
+#### `@mui/x-data-grid-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.2`.
+
+#### `@mui/x-data-grid-premium@v6.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.2`, plus:
+
+- [DataGridPremium] Allow to customize grouping cell offset (#9417) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.2`
+
+- [pickers] Remove the `endOfDate` from `DigitalClock` timeOptions (#9800) @noraleonte
+
+#### `@mui/x-date-pickers-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.2`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.5`
+
+- [charts] Improve JSDoc for axis-related props (#9779) @flaviendelangle
+- [charts] Improve performances of Scatter component (#9527) @flaviendelangle
+
+### Docs
+
+- [docs] Add `pnpm` in more places @oliviertassinari
+- [docs] Add `pnpm` installation instructions for MUI X (#9707) @richbustos
+- [docs] Align pickers "uncontrolled vs controlled" sections (#9772) @LukasTy
+- [docs] Apply style guide to the data grid Layout page (#9673) @richbustos
+- [docs] Differentiate between packages in `slotProps` docs (#9668) @cherniavskii
+- [docs] Fix charts width in axis pages (#9801) @alexfauquette
+- [docs] Fix wrong prop name in the Editing page (#9753) @m4theushw
+- [docs] New component API page and side nav design (#9187) @alexfauquette
+- [docs] Update overview page with up to date information about the plans (#9512) @joserodolfofreitas
+
+### Core
+
+- [core] Use PR charts version in preview (#9787) @alexfauquette
+- [license] Allow overriding the license on specific parts of the page (#9717) @Janpot
+- [license] Throw in dev mode after 30 days (#9701) @oliviertassinari
+- [license] Only throw in dev mode (#9803) @oliviertassinari
+- [test] Fail the CI when new unexpected files are created (#9728) @oliviertassinari
+
+## 6.10.1
+
+_Jul 20, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix CSV export for values containing double quotes
+- 🚀 Improve tree data performance
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.1`
+
+- [DataGrid] Filtering performance: compile filter applier with `eval` (#9635) @romgrk
+- [DataGrid] Fix CSV export for values containing double quotes (#9667) @cherniavskii
+- [DataGrid] Fix column type change not working correctly (#9594) @cherniavskii
+- [DataGrid] Fix quick filter `undefined` row error (#9708) @romgrk
+- [DataGrid] Prevent `viewportOuterSize.height` going negative (#9664) @gitstart
+- [DataGrid] Update focused cell on page change via keyboard (#9203) @m4theushw
+- [DataGrid] Wait for remote stylesheets to load before print (#9665) @cherniavskii
+
+#### `@mui/x-data-grid-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.1`, plus:
+
+- [DataGridPro] Improve tree data performance (#9682) @cherniavskii
+- [DataGridPro] Prevent affecting cells from child DataGrid when resizing a column (#9670) @m4theushw
+
+#### `@mui/x-data-grid-premium@v6.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.1`
+
+- [fields] Fix `format` and `value` update order (#9715) @LukasTy
+- [pickers] Remove `require` usage in comment (#9675) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.4`
+
+- [charts] Fix blinking in responsive charts and extremums computation for line charts (#9734) @alexfauquette
+- [charts] Use ESM with imports (#9645) @alexfauquette
+
+### Docs
+
+- [docs] Add additional note for license key installation on Next.js (#9575) @joserodolfofreitas
+- [docs] Add paragraph about managing focus of custom edit components (#9658) @m4theushw
+- [docs] Add unsorted icon slot to the custom sort icons demo (#9169) @d4rekanguok
+- [docs] Disable ad for onboarding pages (#9700) @oliviertassinari
+- [docs] Disabling ads without toolbar has no effect @oliviertassinari
+- [docs] Fix Date Pickers usage to Title Case (#9680) @richbustos
+- [docs] Fix sorting in `CustomSortIcons` demo (#9656) @MBilalShafi
+- [docs] Improve the UI for pickers introduction (#9644) @alexfauquette
+- [docs] Improve the demo design @oliviertassinari
+- [docs] Localization progress, polish (#9672) @oliviertassinari
+- [docs] Normalize the WIP items (#9671) @oliviertassinari
+
+### Core
+
+- [core] Add `validate` command (#9714) @romgrk
+- [CHANGELOG] Update generator to new format @oliviertassinari
+
 ## 6.10.0
 
 _Jul 13, 2023_
@@ -26,11 +159,11 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Make `rowExpansionChange` event public (#9611) @MBilalShafi
 - [l10n] Improve Polish (pl-PL) locale (#9625) @ch1llysense
 
-#### `@mui/x-data-grid-pro@6.10.0`
+#### `@mui/x-data-grid-pro@6.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
 
 Same changes as in `@mui/x-data-grid@6.10.0`.
 
-#### `@mui/x-data-grid-premium@6.10.0`
+#### `@mui/x-data-grid-premium@6.10.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
 
 Same changes as in `@mui/x-data-grid-pro@6.10.0`.
 
@@ -41,7 +174,7 @@ Same changes as in `@mui/x-data-grid-pro@6.10.0`.
 - [pickers] Fix date calendar issues (#9652) @LukasTy
 - [l10n] Improve Norwegian (nb-NO) locale (#9608) @JosteinBrevik
 
-#### `@mui/x-date-pickers-pro@6.10.0`
+#### `@mui/x-date-pickers-pro@6.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
 
 Same changes as in `@mui/x-date-pickers@6.10.0`.
 

package/components/GridRow.d.ts

@@ -28,6 +28,8 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
     tabbableCell: string | null;
     row?: GridRowModel;
     isLastVisible?: boolean;
+    focusedCellColumnIndexNotInRange?: number;
+    isNotVisible?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;

package/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -64,10 +64,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       position,
       rowHeight,
       className,
+      visibleColumns,
       renderedColumns,
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
+      focusedCellColumnIndexNotInRange,
+      isNotVisible,
+      focusedCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -173,7 +177,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
       // User clicked a button from the "actions" column type
       const column = apiRef.current.getColumn(field);
-      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -190,6 +194,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     var _editRowsState$rowId$, _editRowsState$rowId;
     const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
     const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    let cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
     return /*#__PURE__*/_jsx(CellComponent, _extends({
       column: column,
       width: cellProps.width,
@@ -200,7 +208,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       colIndex: cellProps.indexRelativeToAllColumns,
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
     }, slotProps == null ? void 0 : slotProps.cell), column.field);
   };
   const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
@@ -222,25 +231,35 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       minHeight = maximumSize;
     }
   }
-  const style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight
-  });
-  if (sizes != null && sizes.spacingTop) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-  if (sizes != null && sizes.spacingBottom) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    let propertyValue = style[property];
-    // avoid overriding existing value
-    if (typeof propertyValue !== 'number') {
-      propertyValue = parseInt(propertyValue || '0', 10);
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        opacity: 0,
+        width: 0,
+        height: 0
+      };
     }
-    propertyValue += sizes.spacingBottom;
-    style[property] = propertyValue;
-  }
+    const rowStyle = _extends({}, styleProp, {
+      maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+      // max-height doesn't support "auto"
+      minHeight
+    });
+    if (sizes != null && sizes.spacingTop) {
+      const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+      rowStyle[property] = sizes.spacingTop;
+    }
+    if (sizes != null && sizes.spacingBottom) {
+      const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+      let propertyValue = rowStyle[property];
+      // avoid overriding existing value
+      if (typeof propertyValue !== 'number') {
+        propertyValue = parseInt(propertyValue || '0', 10);
+      }
+      propertyValue += sizes.spacingBottom;
+      rowStyle[property] = propertyValue;
+    }
+    return rowStyle;
+  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   if (typeof rootProps.getRowClassName === 'function') {
     var _currentPage$range;
@@ -261,7 +280,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
-    const indexRelativeToAllColumns = firstColumnToRender + i;
+    let indexRelativeToAllColumns = firstColumnToRender + i;
+    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
+      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
+      } else {
+        indexRelativeToAllColumns -= 1;
+      }
+    }
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
       if (rowType !== 'skeletonRow') {
@@ -324,12 +350,14 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If `null`, no cell in this row has focus.
    */
   focusedCell: PropTypes.string,
+  focusedCellColumnIndexNotInRange: PropTypes.number,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
+  isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

package/components/cell/GridCell.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { GridRowId, GridCellMode } from '../../models';
+import { GridRowId, GridCellMode, GridEditCellProps } from '../../models';
 import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
-import { GridEditCellProps } from '../../models/gridEditRowModel';
 type GridCellV7Props = {
     align: GridAlignment;
     className?: string;
@@ -13,6 +12,7 @@ type GridCellV7Props = {
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
+    isNotVisible?: boolean;
     editCellState: GridEditCellProps<any> | null;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;

package/components/cell/GridCell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -177,6 +177,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       showRightBorder,
       colSpan,
       disableDragEvents,
+      isNotVisible,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -227,13 +228,23 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
-  const style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    const cellStyle = {
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+    };
 
+    return cellStyle;
+  }, [width, height, isNotVisible]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -353,6 +364,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: PropTypes.bool,
     value: PropTypes.any
   }),
+  isNotVisible: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
@@ -380,6 +392,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       showRightBorder,
       colSpan,
       disableDragEvents,
+      isNotVisible,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -474,13 +487,23 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
-  const style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    const cellStyle = {
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+    };
 
+    return cellStyle;
+  }, [width, height, isNotVisible]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -594,6 +617,7 @@ process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
     value: PropTypes.any
   }),
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  isNotVisible: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onDragEnter: PropTypes.func,

package/components/containers/GridRootStyles.js

@@ -159,6 +159,7 @@ export const GridRootStyles = styled('div', {
     '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
     '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
     '--unstable_DataGrid-overlayBackground': theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--DataGrid-cellOffsetMultiplier': 2,
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',

package/components/panel/GridPanel.js

@@ -70,8 +70,8 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   }], []);
   const [anchorEl, setAnchorEl] = React.useState(null);
   React.useEffect(() => {
-    var _apiRef$current$rootE, _apiRef$current$rootE2;
-    const columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.querySelector(`.${gridClasses.columnHeaders}`);
+    var _apiRef$current$rootE;
+    const columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector(`.${gridClasses.columnHeaders}`);
     if (columnHeadersElement) {
       setAnchorEl(columnHeadersElement);
     }

package/components/panel/filterPanel/GridFilterForm.js

@@ -217,7 +217,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focus: () => {
       if (currentOperator != null && currentOperator.InputComponent) {
         var _valueRef$current;
-        valueRef == null ? void 0 : (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
+        valueRef == null || (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
       } else {
         filterSelectorRef.current.focus();
       }
@@ -313,7 +313,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
-        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
           key: operator.value,
           value: operator.value

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -43,7 +43,7 @@ const SingleSelectOperatorContainer = styled('div')({
   }
 });
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   const {
       item,
       applyValue,
@@ -62,7 +62,7 @@ function GridFilterInputSingleSelect(props) {
   const id = useId();
   const labelId = useId();
   const rootProps = useGridRootProps();
-  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : (_rootProps$slotProps$2 = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps$2.native) != null ? _rootProps$slotProps$ : true;
+  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : true;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);

package/hooks/features/columns/gridColumnsUtils.js

@@ -197,6 +197,13 @@ export const applyInitialState = (columnsState, initialState) => {
   });
   return newColumnsState;
 };
+function getDefaultColTypeDef(columnTypes, type) {
+  let colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && columnTypes[type]) {
+    colDef = columnTypes[type];
+  }
+  return colDef;
+}
 export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
@@ -205,7 +212,7 @@ export const createColumnsState = ({
   columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
-  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
+  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current;
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsState;
   if (isInsideStateInitializer) {
@@ -238,11 +245,7 @@ export const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      let colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
-      if (newColumn.type && columnTypes[newColumn.type]) {
-        colDef = columnTypes[newColumn.type];
-      }
-      existingState = _extends({}, colDef, {
+      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -250,6 +253,13 @@ export const createColumnsState = ({
     } else if (keepOnlyColumnsToUpsert) {
       columnsState.orderedFields.push(field);
     }
+
+    // If the column type has changed - merge the existing state with the default column type definition
+    if (existingState && existingState.type !== newColumn.type) {
+      existingState = _extends({}, existingState, getDefaultColTypeDef(columnTypes, newColumn.type), {
+        field
+      });
+    }
     let hasBeenResized = existingState.hasBeenResized;
     COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
       if (newColumn[key] !== undefined) {
@@ -272,7 +282,7 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null || (_apiRef$current$getRo2 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState

package/hooks/features/columns/useGridColumns.js

@@ -11,13 +11,13 @@ import { getGridDefaultColumnTypes } from '../../../colDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultColumnTypes = getGridDefaultColumnTypes();
 export const columnsStateInitializer = (state, props, apiRef) => {
-  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
+  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2;
   const columnsState = createColumnsState({
     apiRef,
     columnTypes: defaultColumnTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
-    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.columns) == null ? void 0 : _props$initialState2$.columnVisibilityModel) != null ? _ref : {},
+    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
@@ -160,7 +160,7 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState$c, _props$initialState3, _props$initialState3$;
+    var _props$initialState$c, _props$initialState3;
     const columnsStateToExport = {};
     const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
     const shouldExportColumnVisibilityModel =
@@ -170,7 +170,7 @@ export function useGridColumns(apiRef, props) {
     props.columnVisibilityModel != null ||
     // Always export if the model has been initialized
     // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
-    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.columns) == null ? void 0 : _props$initialState3$.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
+    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.columns) == null ? void 0 : _props$initialState3.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
     // Always export if the model is not empty
     Object.keys(columnVisibilityModelToExport).length > 0;
     if (shouldExportColumnVisibilityModel) {

package/hooks/features/dimensions/useGridDimensions.js

@@ -81,7 +81,7 @@ export function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - totalHeaderHeight
+        height: Math.max(rootDimensionsRef.current.height - totalHeaderHeight, 0)
       };
       const scrollInformation = hasScroll({
         content: {

package/hooks/features/editing/useGridCellEditing.js

@@ -338,7 +338,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   });
   const setCellEditingEditCellValue = React.useCallback(async params => {
-    var _editingState$id, _editingState$id$fiel;
+    var _editingState$id;
     const {
       id,
       field,
@@ -388,7 +388,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !((_editingState$id = editingState[id]) != null && (_editingState$id$fiel = _editingState$id[field]) != null && _editingState$id$fiel.error);
+    return !((_editingState$id = editingState[id]) != null && (_editingState$id = _editingState$id[field]) != null && _editingState$id.error);
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
@@ -432,8 +432,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
-        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
-        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || GridCellModes.View;
+        var _copyOfPrevCellModes$, _idToIdLookup$id;
+        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null || (_copyOfPrevCellModes$ = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$.mode) || GridCellModes.View;
         const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({

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

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