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

package/legacy/components/containers/GridRootStyles.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _columnHeaderStyles;
 import { alpha, styled, darken, lighten } from '@mui/material/styles';
 import { gridClasses } from '../../constants/gridClasses';
 function getBorderColor(theme) {
@@ -16,13 +15,13 @@ var columnHeadersStyles = _defineProperty({}, ".".concat(gridClasses.columnSepar
   visibility: 'visible',
   width: 'auto'
 });
-var columnHeaderStyles = (_columnHeaderStyles = {}, _defineProperty(_columnHeaderStyles, "& .".concat(gridClasses.iconButtonContainer), {
+var columnHeaderStyles = _defineProperty(_defineProperty({}, "& .".concat(gridClasses.iconButtonContainer), {
   visibility: 'visible',
   width: 'auto'
-}), _defineProperty(_columnHeaderStyles, "& .".concat(gridClasses.menuIcon), {
+}), "& .".concat(gridClasses.menuIcon), {
   width: 'auto',
   visibility: 'visible'
-}), _columnHeaderStyles);
+});
 export var GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -31,7 +30,7 @@ export var GridRootStyles = styled('div', {
     _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses['cell--withRightBorder']), styles['cell--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--withRightBorder']), styles['columnHeader--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
 })(function (_ref61) {
-  var _$concat2, _mediaHoverHover, _mediaHoverNone, _$concat3, _extends2;
+  var _extends2;
   var theme = _ref61.theme;
   var borderColor = getBorderColor(theme);
   var radius = theme.shape.borderRadius;
@@ -57,45 +56,45 @@ export var GridRootStyles = styled('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflowAnchor: 'none'
-  }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
     height: 'auto'
   }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
     borderBottomColor: 'transparent'
-  })), _defineProperty(_extends2, "&.".concat(gridClasses.autosizing), (_$concat2 = {}, _defineProperty(_$concat2, "& .".concat(gridClasses.columnHeaderTitleContainerContent, " > *"), {
+  })), "&.".concat(gridClasses.autosizing), _defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainerContent, " > *"), {
     overflow: 'visible !important'
-  }), _defineProperty(_$concat2, "& .".concat(gridClasses.cell, " > *"), {
+  }), "& .".concat(gridClasses.cell, " > *"), {
     overflow: 'visible !important',
     whiteSpace: 'nowrap'
-  }), _$concat2)), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
+  })), "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
     borderBottomColor: 'transparent'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
+  }), "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
     WebkitTapHighlightColor: 'transparent',
     lineHeight: null,
     padding: '0 10px',
     boxSizing: 'border-box'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ":focus-within, & .").concat(gridClasses.cell, ":focus-within"), {
+  }), "& .".concat(gridClasses.columnHeader, ":focus-within, & .").concat(gridClasses.cell, ":focus-within"), {
     outline: "solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / 0.5)") : alpha(theme.palette.primary.main, 0.5), " 1px"),
     outlineWidth: 1,
     outlineOffset: -1
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ":focus, & .").concat(gridClasses.cell, ":focus"), {
+  }), "& .".concat(gridClasses.columnHeader, ":focus, & .").concat(gridClasses.cell, ":focus"), {
     outline: "solid ".concat(theme.palette.primary.main, " 1px")
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderCheckbox, ", & .").concat(gridClasses.cellCheckbox), {
+  }), "& .".concat(gridClasses.columnHeaderCheckbox, ", & .").concat(gridClasses.cellCheckbox), {
     padding: 0,
     justifyContent: 'center',
     alignItems: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader), {
+  }), "& .".concat(gridClasses.columnHeader), {
     position: 'relative',
     display: 'flex',
     alignItems: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sorted'], " .").concat(gridClasses.iconButtonContainer, ", & .").concat(gridClasses['columnHeader--filtered'], " .").concat(gridClasses.iconButtonContainer), {
+  }), "& .".concat(gridClasses['columnHeader--sorted'], " .").concat(gridClasses.iconButtonContainer, ", & .").concat(gridClasses['columnHeader--filtered'], " .").concat(gridClasses.iconButtonContainer), {
     visibility: 'visible',
     width: 'auto'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], ") .").concat(gridClasses.sortIcon), {
+  }), "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], ") .").concat(gridClasses.sortIcon), {
     opacity: 0,
     transition: theme.transitions.create(['opacity'], {
       duration: theme.transitions.duration.shorter
     })
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainer), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainer), {
     display: 'flex',
     alignItems: 'center',
     minWidth: 0,
@@ -104,39 +103,39 @@ export var GridRootStyles = styled('div', {
     overflow: 'hidden',
     // to anchor the aggregation label
     position: 'relative'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
+  }), "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--filledGroup'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(gridClasses['columnHeader--filledGroup'], " .").concat(gridClasses.columnHeaderTitleContainer), {
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     boxSizing: 'border-box'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder'], " .").concat(gridClasses.columnHeaderTitleContainer), {
     borderBottom: "none"
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder']), {
+  }), "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder']), {
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     boxSizing: 'border-box'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.headerFilterRow), {
+  }), "& .".concat(gridClasses.headerFilterRow), {
     borderTop: "1px solid ".concat(borderColor)
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
+  }), "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
     fontSize: 'inherit'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sortable']), {
+  }), "& .".concat(gridClasses['columnHeader--sortable']), {
     cursor: 'pointer'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.columnHeaderTitleContainer), {
     justifyContent: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderDraggableContainer, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderDraggableContainer, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderTitleContainer), {
     flexDirection: 'row-reverse'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
     marginRight: 'auto',
     marginLeft: -6
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
+  }), "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
     marginRight: 'auto',
     marginLeft: -10
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--moving']), {
+  }), "& .".concat(gridClasses['columnHeader--moving']), {
     backgroundColor: (theme.vars || theme).palette.action.hover
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnSeparator), {
+  }), "& .".concat(gridClasses.columnSeparator), {
     visibility: 'hidden',
     position: 'absolute',
     zIndex: 100,
@@ -144,13 +143,13 @@ export var GridRootStyles = styled('div', {
     flexDirection: 'column',
     justifyContent: 'center',
     color: borderColor
-  }), _defineProperty(_extends2, '@media (hover: hover)', (_mediaHoverHover = {}, _defineProperty(_mediaHoverHover, "& .".concat(gridClasses.columnHeaders, ":hover"), columnHeadersStyles), _defineProperty(_mediaHoverHover, "& .".concat(gridClasses.columnHeader, ":hover"), columnHeaderStyles), _defineProperty(_mediaHoverHover, "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], "):hover .").concat(gridClasses.sortIcon), {
+  }), '@media (hover: hover)', _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaders, ":hover"), columnHeadersStyles), "& .".concat(gridClasses.columnHeader, ":hover"), columnHeaderStyles), "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], "):hover .").concat(gridClasses.sortIcon), {
     opacity: 0.5
-  }), _mediaHoverHover)), _defineProperty(_extends2, '@media (hover: none)', (_mediaHoverNone = {}, _defineProperty(_mediaHoverNone, "& .".concat(gridClasses.columnHeaders), columnHeadersStyles), _defineProperty(_mediaHoverNone, "& .".concat(gridClasses.columnHeader), columnHeaderStyles), _mediaHoverNone)), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideLeft']), {
+  })), '@media (hover: none)', _defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaders), columnHeadersStyles), "& .".concat(gridClasses.columnHeader), columnHeaderStyles)), "& .".concat(gridClasses['columnSeparator--sideLeft']), {
     left: -12
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideRight']), {
+  }), "& .".concat(gridClasses['columnSeparator--sideRight']), {
     right: -12
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), (_$concat3 = {
+  }), "& .".concat(gridClasses['columnSeparator--resizable']), _defineProperty(_defineProperty({
     cursor: 'col-resize',
     touchAction: 'none',
     '&:hover': {
@@ -160,23 +159,23 @@ export var GridRootStyles = styled('div', {
         color: borderColor
       }
     }
-  }, _defineProperty(_$concat3, "&.".concat(gridClasses['columnSeparator--resizing']), {
+  }, "&.".concat(gridClasses['columnSeparator--resizing']), {
     color: (theme.vars || theme).palette.text.primary
-  }), _defineProperty(_$concat3, '& svg', {
+  }), '& svg', {
     pointerEvents: 'none'
-  }), _$concat3)), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
+  })), "& .".concat(gridClasses.iconSeparator), {
     color: 'inherit'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
     width: 0,
     visibility: 'hidden',
     fontSize: 20,
     marginRight: -10,
     display: 'flex',
     alignItems: 'center'
-  }), _defineProperty(_extends2, ".".concat(gridClasses.menuOpen), {
+  }), ".".concat(gridClasses.menuOpen), {
     visibility: 'visible',
     width: 'auto'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.row), {
+  }), "& .".concat(gridClasses.row), {
     display: 'flex',
     width: 'fit-content',
     breakInside: 'avoid',
@@ -198,7 +197,7 @@ export var GridRootStyles = styled('div', {
         }
       }
     }
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.cell), {
+  }), "& .".concat(gridClasses.cell), {
     display: 'flex',
     alignItems: 'center',
     borderBottom: '1px solid',
@@ -212,17 +211,17 @@ export var GridRootStyles = styled('div', {
         }
       }
     }
-  }), _defineProperty(_extends2, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), {
+  }), "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), {
     userSelect: 'none'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.row, ":not(.").concat(gridClasses['row--dynamicHeight'], ") > .").concat(gridClasses.cell), {
+  }), "& .".concat(gridClasses.row, ":not(.").concat(gridClasses['row--dynamicHeight'], ") > .").concat(gridClasses.cell), {
     overflow: 'hidden',
     whiteSpace: 'nowrap'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.cellContent), {
+  }), "& .".concat(gridClasses.cellContent), {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--selectionMode']), {
+  }), "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--selectionMode']), {
     cursor: 'default'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--editing']), {
+  }), "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--editing']), {
     padding: 1,
     display: 'flex',
     boxShadow: theme.shadows[2],
@@ -231,85 +230,85 @@ export var GridRootStyles = styled('div', {
       outline: "solid ".concat((theme.vars || theme).palette.primary.main, " 1px"),
       outlineOffset: '-1px'
     }
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['row--editing']), {
+  }), "& .".concat(gridClasses['row--editing']), {
     boxShadow: theme.shadows[2]
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['row--editing'], " .").concat(gridClasses.cell), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['row--editing'], " .").concat(gridClasses.cell), {
     boxShadow: theme.shadows[0],
     backgroundColor: (theme.vars || theme).palette.background.paper
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.editBooleanCell), {
+  }), "& .".concat(gridClasses.editBooleanCell), {
     display: 'flex',
     height: '100%',
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.booleanCell, "[data-value=\"true\"]"), {
+  }), "& .".concat(gridClasses.booleanCell, "[data-value=\"true\"]"), {
     color: (theme.vars || theme).palette.text.secondary
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.booleanCell, "[data-value=\"false\"]"), {
+  }), "& .".concat(gridClasses.booleanCell, "[data-value=\"false\"]"), {
     color: (theme.vars || theme).palette.text.disabled
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.actionsCell), {
+  }), "& .".concat(gridClasses.actionsCell), {
     display: 'inline-flex',
     alignItems: 'center',
     gridGap: theme.spacing(1)
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCell), {
+  }), "& .".concat(gridClasses.rowReorderCell), {
     display: 'inline-flex',
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['rowReorderCell--draggable']), {
+  }), "& .".concat(gridClasses['rowReorderCell--draggable']), {
     cursor: 'move',
     opacity: 1
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellContainer), {
+  }), "& .".concat(gridClasses.rowReorderCellContainer), {
     padding: 0,
     alignItems: 'stretch'
-  }), _defineProperty(_extends2, ".".concat(gridClasses.withBorderColor), {
+  }), ".".concat(gridClasses.withBorderColor), {
     borderColor: borderColor
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['cell--withRightBorder']), {
+  }), "& .".concat(gridClasses['cell--withRightBorder']), {
     borderRightWidth: '1px',
     borderRightStyle: 'solid'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--withRightBorder']), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--withRightBorder']), {
     borderRightWidth: '1px',
     borderRightStyle: 'solid'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['cell--textLeft']), {
+  }), "& .".concat(gridClasses['cell--textLeft']), {
     justifyContent: 'flex-start'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['cell--textRight']), {
+  }), "& .".concat(gridClasses['cell--textRight']), {
     justifyContent: 'flex-end'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['cell--textCenter']), {
+  }), "& .".concat(gridClasses['cell--textCenter']), {
     justifyContent: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderDraggableContainer), {
+  }), "& .".concat(gridClasses.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%',
     height: '100%'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+  }), "& .".concat(gridClasses.rowReorderCellPlaceholder), {
     display: 'none'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {
+  }), "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {
     background: (theme.vars || theme).palette.background.paper,
     padding: '0 12px',
     borderRadius: 'var(--unstable_DataGrid-radius)',
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['row--dragging']), _defineProperty({
+  }), "& .".concat(gridClasses['row--dragging']), _defineProperty({
     background: (theme.vars || theme).palette.background.paper,
     padding: '0 12px',
     borderRadius: 'var(--unstable_DataGrid-radius)',
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   }, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
     display: 'flex'
-  })), _defineProperty(_extends2, "& .".concat(gridClasses.treeDataGroupingCell), {
+  })), "& .".concat(gridClasses.treeDataGroupingCell), {
     display: 'flex',
     alignItems: 'center',
     width: '100%'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.treeDataGroupingCellToggle), {
+  }), "& .".concat(gridClasses.treeDataGroupingCellToggle), {
     flex: '0 0 28px',
     alignSelf: 'stretch',
     marginRight: theme.spacing(2)
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.groupingCriteriaCell), {
+  }), _defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.groupingCriteriaCell), {
     display: 'flex',
     alignItems: 'center',
     width: '100%'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.groupingCriteriaCellToggle), {
+  }), "& .".concat(gridClasses.groupingCriteriaCellToggle), {
     flex: '0 0 28px',
     alignSelf: 'stretch',
     marginRight: theme.spacing(2)
-  }), _extends2));
+  })));
   return gridStyle;
 });

package/legacy/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -29,7 +29,7 @@ function GridColumnMenuSortItem(props) {
   var onSortMenuItemClick = React.useCallback(function (event) {
     onClick(event);
     var direction = event.currentTarget.getAttribute('data-value') || null;
-    apiRef.current.sortColumn(colDef, direction === sortDirection ? null : direction);
+    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
   }, [apiRef, colDef, onClick, sortDirection]);
   if (!colDef || !colDef.sortable || !sortingOrder.some(function (item) {
     return !!item;

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -205,8 +205,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
       return operator.value === item.operator;
     }) || column.filterOperators[0];
 
-    // Erase filter value if the input component is modified
-    var eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    // Erase filter value if the input component or filtered column type is modified
+    var eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
     applyFilterChanges(_extends({}, item, {
       field: field,
       operator: newOperator.value,

package/legacy/components/panel/filterPanel/GridFilterInputValue.js

@@ -47,7 +47,7 @@ function GridFilterInputValue(props) {
   }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(function () {
     var itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id) {
+    if (itemPlusTag.fromInput !== id || item.value === undefined) {
       var _item$value2;
       setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
     }

package/legacy/components/panel/index.js

@@ -4,5 +4,4 @@ export * from './GridPanelContent';
 export * from './GridPanelFooter';
 export * from './GridPanelHeader';
 export * from './GridPanelWrapper';
-export * from './GridPreferencesPanel';
 export * from './filterPanel';

package/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -21,9 +21,8 @@ var GridToolbarQuickFilterRoot = styled(TextField, {
     return styles.toolbarQuickFilter;
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {
+  return _defineProperty(_defineProperty({
     width: 'auto',
     paddingBottom: theme.spacing(0.5),
     '& input': {
@@ -32,15 +31,15 @@ var GridToolbarQuickFilterRoot = styled(TextField, {
     '& .MuiInput-underline:before': {
       borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider)
     }
-  }, _defineProperty(_ref2, "& input[type=search]::-ms-clear,\n& input[type=search]::-ms-reveal", {
+  }, "& input[type=search]::-ms-clear,\n& input[type=search]::-ms-reveal", {
     /* clears the 'X' icon from IE */
     display: 'none',
     width: 0,
     height: 0
-  }), _defineProperty(_ref2, "& input[type=\"search\"]::-webkit-search-decoration,\n  & input[type=\"search\"]::-webkit-search-cancel-button,\n  & input[type=\"search\"]::-webkit-search-results-button,\n  & input[type=\"search\"]::-webkit-search-results-decoration", {
+  }), "& input[type=\"search\"]::-webkit-search-decoration,\n  & input[type=\"search\"]::-webkit-search-cancel-button,\n  & input[type=\"search\"]::-webkit-search-results-button,\n  & input[type=\"search\"]::-webkit-search-results-decoration", {
     /* clears the 'X' icon from Chrome */
     display: 'none'
-  }), _ref2;
+  });
 });
 var defaultSearchValueParser = function defaultSearchValueParser(searchText) {
   return searchText.split(' ').filter(function (word) {

package/legacy/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
 import { GridCellV7 } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -17,7 +17,6 @@ export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
-  preferencesPanel: GridPreferencesPanel,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,

package/legacy/hooks/features/clipboard/useGridClipboard.js

@@ -51,7 +51,7 @@ function hasNativeSelection(element) {
  * @requires useGridSelection (method)
  */
 export var useGridClipboard = function useGridClipboard(apiRef, props) {
-  var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  var ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   var clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   var handleCopy = React.useCallback(function (event) {

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

@@ -8,7 +8,7 @@ var _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -108,7 +108,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       if (isPrintableKey(event)) {
         _reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        _reason = GridCellEditStartReasons.printableKeyDown;
+        _reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         _reason = GridCellEditStartReasons.enterKeyDown;
       } else if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -127,23 +127,12 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var handleCellEditStart = React.useCallback(function (params) {
     var id = params.id,
       field = params.field,
-      reason = params.reason,
-      key = params.key,
-      colDef = params.colDef;
+      reason = params.reason;
     var startCellEditModeParams = {
       id: id,
       field: field
     };
-    if (reason === GridCellEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startCellEditModeParams.deleteValue = true;
-      } else {
-        var initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-        startCellEditModeParams.initialValue = initialValue;
-      }
-    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown || reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.pasteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
     apiRef.current.startCellEditMode(startCellEditModeParams);
@@ -244,17 +233,13 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       deleteValue = params.deleteValue,
       initialValue = params.initialValue;
     var newValue = apiRef.current.getCellValue(id, field);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    var unstable_updateValueOnRender = false;
     if (deleteValue || initialValue) {
       newValue = deleteValue ? '' : initialValue;
-      unstable_updateValueOnRender = true;
     }
     var newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false,
-      unstable_updateValueOnRender: unstable_updateValueOnRender
+      isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
@@ -439,7 +424,9 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       updateCellModesModel(cellModesModelProp);
     }
   }, [cellModesModelProp, updateCellModesModel]);
-  React.useEffect(function () {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(function () {
     var idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later

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

@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -179,7 +179,6 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         var rowParams = apiRef.current.getRowParams(params.id);
         var _newParams = _extends({}, rowParams, {
           field: params.field,
-          key: event.key,
           reason: _reason
         });
         apiRef.current.publishEvent('rowEditStart', _newParams, event);
@@ -189,25 +188,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
       field = params.field,
-      reason = params.reason,
-      key = params.key,
-      columns = params.columns;
+      reason = params.reason;
     var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
     };
-    if (reason === GridRowEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startRowEditModeParams.deleteValue = !!field;
-      } else {
-        var colDef = columns.find(function (col) {
-          return col.field === field;
-        });
-        startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-      }
-    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown || reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
@@ -322,17 +308,13 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
       var newValue = apiRef.current.getCellValue(id, field);
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      var unstable_updateValueOnRender = false;
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         newValue = deleteValue ? '' : initialValue;
-        unstable_updateValueOnRender = true;
       }
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false,
-        unstable_updateValueOnRender: unstable_updateValueOnRender
+        isProcessingProps: false
       };
       return acc;
     }, {});
@@ -559,7 +541,9 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       updateRowModesModel(rowModesModelProp);
     }
   }, [rowModesModelProp, updateRowModesModel]);
-  React.useEffect(function () {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(function () {
     var idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later

package/legacy/hooks/features/export/useGridCsvExport.js

@@ -18,7 +18,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export var useGridCsvExport = function useGridCsvExport(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridCsvExport');
-  var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  var ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   var getDataAsCsv = React.useCallback(function () {
     var _options$getRowsToExp, _options$includeHeade, _options$includeColum;