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

package/CHANGELOG.md

@@ -3,7 +3,157 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## v7.0.0-beta.3
+## 7.0.0-beta.4
+
+_Feb 23, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce a new DOM structure for the field components that provides a better accessibility
+- 🚀 Simplify Data Grid DOM structure for improved performance (#12013) @romgrk
+- 🕥 The support for IE11 has been removed (#12151) @flaviendelangle
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Breaking changes
+
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+
+### Data Grid
+
+#### Breaking changes
+
+- The cell inner wrapper `.MuiDataGrid-cellContent` has been removed, use `.MuiDataGrid-cell` to style the cells.
+
+#### `@mui/x-data-grid@7.0.0-beta.4`
+
+- [DataGrid] Simplify cell DOM structure (#12013) @romgrk
+- [DataGrid] Fix values labels in `is any of` filter operator (#11939) @gitstart
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.4`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
+
+### Date Pickers
+
+#### Breaking changes
+
+- The `selectedSections` prop no longer accepts start and end indexes.
+  When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:
+
+  ```diff
+   <DateField
+  -  selectedSections={{ startIndex: 0, endIndex: 0 }}
+  +  selectedSections={0}
+  
+     // If the field has 3 sections
+  -  selectedSections={{ startIndex: 0, endIndex: 2 }}
+  +  selectedSections="all"
+   />
+  ```
+
+- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
+  This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
+
+ When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
+
+  ```diff
+    function MyCustomTextField(props) {
+      const {
+  +     // Should be ignored
+  +     enableAccessibleFieldDOMStructure,
+        // ... rest of the props you are using
+      } = props;
+  
+      return ( /* Some UI to edit the date */ )
+    }
+  
+    function MyCustomField(props) {
+      const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
+        ...props,
+  +     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
+  +     enableAccessibleFieldDOMStructure: false,
+      });
+  
+      return <MyCustomTextField ref={ref} {...fieldResponse} />;
+    }
+  
+    function App() {
+      return <DatePicker slots={{ field: MyCustomField }} />;
+    }
+  ```
+
+- The following internal types were exported by mistake and have been removed from the public API:
+
+  - `UseDateFieldDefaultizedProps`
+  - `UseTimeFieldDefaultizedProps`
+  - `UseDateTimeFieldDefaultizedProps`
+  - `UseSingleInputDateRangeFieldComponentProps`
+  - `UseSingleInputTimeRangeFieldComponentProps`
+  - `UseSingleInputDateTimeRangeFieldComponentProps`
+
+#### `@mui/x-date-pickers@7.0.0-beta.4`
+
+- [fields] Add a11y support to multi-HTML field (#12173) @LukasTy
+- [fields] Use the `PickersTextField` component in the fields (#10649) @flaviendelangle
+- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12096) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.4`.
+
+### Charts / `@mui/x-charts@7.0.0-beta.4`
+
+#### Breaking changes
+
+These components are no longer exported from `@mui/x-charts`:
+
+- `CartesianContextProvider`
+- `DrawingProvider`
+
+#### `@mui/x-charts@7.0.0-beta.4`
+
+- [charts] Don't display text if no value is provided (#12127) @alexfauquette
+- [charts] Remove export of context providers (#12123) @oliviertassinari
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.4`
+
+- [TreeView] Stop using custom `findIndex` to support IE11 (#12129) @flaviendelangle
+
+### Docs
+
+- [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
+- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
+- [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
+- [docs] Fix "Licensing" page link (#12156) @LukasTy
+- [docs] Fix the Treemap illustration (#12185) @danilo-leal
+- [docs] Fix error raised by Grammarly on the page @oliviertassinari
+- [docs] Improve performance on Charts entry point @oliviertassinari
+- [docs] Link to React Transition Group with https @oliviertassinari
+- [docs] Move Heatmap to `pro` plan (#12047) @alexfauquette
+- [docs] Reduce number of Vale errors @oliviertassinari
+- [docs] Remove default value set to `undefined` (#12128) @alexfauquette
+
+### Core
+
+- [core] Fix docs link check (#12135) @LukasTy
+- [core] Fix missing context display names (#12124) @oliviertassinari
+- [core] Fix shortcuts when Caps Lock enabled (#12121) @oliviertassinari
+- [core] Remove IE 11 compat logic (#12119) @oliviertassinari
+- [core] Simplify key utils (#12120) @oliviertassinari
+- [core] Use the @mui/internal-scripts package (#12142) @michaldudak
+- [all components] Remove legacy IE 11 bundle (#12151) @flaviendelangle
+- [code-infra] Bump monorepo (#11880) @Janpot
+- [code-infra] Use `experimental.cpus` to control amount of export workers in Next.js (#12095) @Janpot
+- [docs-infra] Remove randomized API page layout (#11876) @alexfauquette
+- [test] Create local wrapper over `describeConformance` (#12130) @michaldudak
+
+## 7.0.0-beta.3
 
 _Feb 16, 2024_
 
@@ -67,7 +217,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.3`.
 - [core] Sort prop asc (#12033) @oliviertassinari
 - [core] Bump monorepo (#12055) @alexfauquette
 
-## v7.0.0-beta.2
+## 7.0.0-beta.2
 
 _Feb 9, 2024_
 
@@ -336,7 +486,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.1`.
 
 _Jan 26, 2024_
 
-We are glad to announce MUI X v7 beta!
+We are glad to announce MUI X v7 beta!
 This version has several improvements, bug fixes, and exciting features 🎉.
 We want to offer a big thanks to the 7 contributors who made this release possible ✨:
 
@@ -1353,7 +1503,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are no longer prefixed with `unstable_`.
 
-- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#DataGrid-prop-filterDebounceMs) prop to customize filter debounce time.
+- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time.
 
 - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
 
@@ -2202,7 +2352,68 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
-## v6.19.4
+## 6.19.5
+
+_Feb 23, 2024_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.5`
+
+- [DataGrid] Fix styling grid filter input single select (#12079) @FreakDroid
+
+#### `@mui/x-data-grid-pro@6.19.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.5`.
+
+#### `@mui/x-data-grid-premium@6.19.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.5`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.5`
+
+- [pickers] Fix `referenceDate` day calendar focus (#12136) @LukasTy
+- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12131) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.5`.
+
+### Charts / `@mui/x-charts@6.19.5`
+
+- [charts] Allow to skip animation on sparkline bar (#12160) @alexfauquette
+
+### Docs
+
+- [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy
+- [docs] Fix 301 redirection to StackBlitz @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 404 links to translation source @oliviertassinari
+- [docs] Fix dead link to translations @oliviertassinari
+- [docs] Fix the Treemap illustration (#12189) @danilo-leal
+- [docs] Fix typo for `AdapterDateFnsV3` (#12037) @flaviendelangle
+- [docs] Improve performance on Charts entry point @oliviertassinari
+- [docs] Move Heatmap to pro (#12170) @alexfauquette
+- [docs] Remove Charts installation next tag call-out (#12133) @LukasTy
+- [docs] Removed `focused` prop from demo (#12126) @michelengelen
+- [docs] Add missing Heatmap pro icon @oliviertassinari
+- [docs] Add more illustrations to the Overview page (#12041) @danilo-leal
+- [docs] Avoid use of shorthand (#12009) @oliviertassinari
+
+### Core
+
+- [core] Fix CI @oliviertassinari
+- [core] Fix docs link check (#12137) @LukasTy
+
+## 6.19.4
 
 _Feb 9, 2024_
 
@@ -2214,7 +2425,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.19.4`
+#### `@mui/x-data-grid@6.19.4`
 
 - [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii
 - [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11992) @pcorpet
@@ -2222,28 +2433,28 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Replace `eval` with `new Function` (#11962) @cherniavskii
 - [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH
 
-#### `@mui/x-data-grid-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@v6.19.4`.
+Same changes as in `@mui/x-data-grid@6.19.4`.
 
-#### `@mui/x-data-grid-premium@v6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
-Same changes as in `@mui/x-data-grid-pro@v6.19.4`, plus:
+Same changes as in `@mui/x-data-grid-pro@6.19.4`, plus:
 
 - [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk
 - [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.19.4`
+#### `@mui/x-date-pickers@6.19.4`
 
 - [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11940) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-date-pickers@v6.19.4`.
+Same changes as in `@mui/x-date-pickers@6.19.4`.
 
-### Charts / `@mui/x-charts@v6.19.4`
+### Charts / `@mui/x-charts@6.19.4`
 
 - [charts] Add `reverse` property to axes (#11959) @alexfauquette
 - [charts] Allow series ids to be numbers (#11960) @alexfauquette
@@ -2304,7 +2515,7 @@ Same changes as in `@mui/x-date-pickers@6.19.3`.
 - [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette
 - [docs] Improve Support page (#11556) @oliviertassinari
 - [docs] Sync support page with core @oliviertassinari
-- [docs] These API don't exist in MUI X v6 @oliviertassinari
+- [docs] These API don't exist in MUI X v6 @oliviertassinari
 - [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas
 
 ## 6.19.2

package/colDef/gridActionsColDef.js

@@ -8,6 +8,7 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   // @ts-ignore
   aggregable: false,
   width: 100,
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   headerName: '',

package/colDef/gridBooleanColDef.js

@@ -25,6 +25,7 @@ const stringToBoolean = value => {
 };
 export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   renderCell: renderBooleanCell,

package/colDef/gridCheckboxSelectionColDef.js

@@ -19,6 +19,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
     const rowId = apiRef.current.getRowId(row);

package/components/GridScrollbarFillerCell.js

@@ -1,34 +1,19 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass as getClassName } from '../constants';
+import { gridClasses } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
-  root: getClassName('scrollbarFiller'),
-  header: getClassName('scrollbarFiller--header'),
-  borderTop: getClassName('scrollbarFiller--borderTop'),
-  pinnedRight: getClassName('scrollbarFiller--pinnedRight')
+  root: gridClasses.scrollbarFiller,
+  header: gridClasses['scrollbarFiller--header'],
+  borderTop: gridClasses['scrollbarFiller--borderTop'],
+  pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
 };
-const Style = styled('div')({
-  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  alignSelf: 'stretch',
-  [`&.${classes.borderTop}`]: {
-    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
-  },
-  [`&.${classes.pinnedRight}`]: {
-    backgroundColor: 'var(--DataGrid-pinnedBackground)'
-  },
-  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
-    position: 'sticky',
-    right: 0
-  }
-});
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
   pinnedRight
 }) {
-  return /*#__PURE__*/_jsx(Style, {
+  return /*#__PURE__*/_jsx("div", {
     role: "presentation",
     className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
   });

package/components/cell/GridCell.js

@@ -58,8 +58,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode'],
-    content: ['cellContent']
+    root: ['cell', `cell--text${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -140,6 +139,9 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
+  if (column.display === 'flex') {
+    classNames.push(gridClasses['cell--flex']);
+  }
   if (getCellClassName) {
     classNames.push(getCellClassName(cellParamsWithAPI));
   }
@@ -248,12 +250,11 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }
   let children;
-  if (editCellState == null && column.renderCell) {
+  let title;
+  if (editCellState === null && column.renderCell) {
     children = column.renderCell(cellParamsWithAPI);
-    classNames.push(gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
   }
-  if (editCellState != null && column.renderEditCell) {
+  if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -267,12 +268,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   if (children === undefined) {
     const valueString = valueToRender == null ? void 0 : valueToRender.toString();
-    children = /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      title: valueString,
-      role: "presentation",
-      children: valueString
-    });
+    children = valueString;
+    title = valueString;
   }
   if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
     children = /*#__PURE__*/React.cloneElement(children, {
@@ -292,6 +289,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
     style: style,
+    title: title,
     tabIndex: tabIndex,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -4,7 +4,6 @@ const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
-import { isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -64,7 +63,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
   }, [hasFocus]);
   const handleKeyDown = React.useCallback(event => {
-    if (isSpaceKey(event.key)) {
+    if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();

package/components/containers/GridRootStyles.js

@@ -47,6 +47,8 @@ export const GridRootStyles = styled('div', {
     [`&.${c.autosizing}`]: styles.autosizing
   }, {
     [`& .${c.editBooleanCell}`]: styles.editBooleanCell
+  }, {
+    [`& .${c.cell}`]: styles.cell
   }, {
     [`& .${c['cell--editing']}`]: styles['cell--editing']
   }, {
@@ -55,12 +57,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
   }, {
     [`& .${c['cell--textRight']}`]: styles['cell--textRight']
-  },
-  // TODO v6: Remove
-  {
-    [`& .${c['cell--withRenderer']}`]: styles['cell--withRenderer']
-  }, {
-    [`& .${c.cell}`]: styles.cell
   }, {
     [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
   }, {
@@ -71,8 +67,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight']
   }, {
     [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder']
-  }, {
-    [`& .${c.cellContent}`]: styles.cellContent
   }, {
     [`& .${c.cellCheckbox}`]: styles.cellCheckbox
   }, {
@@ -235,9 +229,21 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeaderTitleContainerContent} > *`]: {
         overflow: 'visible !important'
       },
-      [`& .${c.cell} > *`]: {
+      '@media (hover: hover)': {
+        [`& .${c.iconButtonContainer}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        },
+        [`& .${c.menuIcon}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        }
+      },
+      [`& .${c.cell}`]: {
         overflow: 'visible !important',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        minWidth: 'max-content !important',
+        maxWidth: 'max-content !important'
       },
       [`& .${c.groupingCriteriaCell}`]: {
         width: 'unset'
@@ -429,15 +435,19 @@ export const GridRootStyles = styled('div', {
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
-      display: 'flex',
-      alignItems: 'center',
       height: 'var(--height)',
       minWidth: 'var(--width)',
       maxWidth: 'var(--width)',
+      lineHeight: 'calc(var(--height) - 1px)',
+      // -1px for the border
+
       '--width': '0px',
       '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
@@ -446,9 +456,10 @@ export const GridRootStyles = styled('div', {
     [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
       userSelect: 'none'
     },
-    [`& .${c.row}:not(.${c['row--dynamicHeight']}) > .${c.cell}`]: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap'
+    [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
+      overflow: 'initial',
+      whiteSpace: 'initial',
+      lineHeight: 'inherit'
     },
     [`& .${c.cellEmpty}`]: {
       padding: 0
@@ -466,10 +477,6 @@ export const GridRootStyles = styled('div', {
         outlineOffset: '-1px'
       }
     },
-    [`& .${c.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     [`& .${c['row--editing']}`]: {
       boxShadow: t.shadows[2]
     },
@@ -508,6 +515,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.rowReorderCellContainer}`]: {
       padding: 0,
+      display: 'flex',
       alignItems: 'stretch'
     },
     [`.${c.withBorderColor}`]: {
@@ -527,13 +535,21 @@ export const GridRootStyles = styled('div', {
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
+    [`& .${c['cell--flex']}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 'inherit'
+    },
     [`& .${c['cell--textLeft']}`]: {
+      textAlign: 'left',
       justifyContent: 'flex-start'
     },
     [`& .${c['cell--textRight']}`]: {
+      textAlign: 'right',
       justifyContent: 'flex-end'
     },
     [`& .${c['cell--textCenter']}`]: {
+      textAlign: 'center',
       justifyContent: 'center'
     },
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
@@ -604,6 +620,21 @@ export const GridRootStyles = styled('div', {
       flex: '0 0 28px',
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
+    },
+    /* ScrollbarFiller styles */
+    [`.${c.scrollbarFiller}`]: {
+      minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      alignSelf: 'stretch',
+      [`&.${c['scrollbarFiller--borderTop']}`]: {
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      },
+      [`&.${c['scrollbarFiller--pinnedRight']}`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)'
+      },
+      [`&.${c['scrollbarFiller--pinnedRight']}:not(.${c['scrollbarFiller--header']})`]: {
+        position: 'sticky',
+        right: 0
+      }
     }
   });
   return gridStyle;

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -52,8 +52,14 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value)) {
       return [];
     }
-    return item.value;
-  }, [item.value]);
+    return item.value.reduce((acc, value) => {
+      const resolvedValue = resolvedValueOptions.find(v => getOptionValue(v) === value);
+      if (resolvedValue != null) {
+        acc.push(resolvedValue);
+      }
+      return acc;
+    }, []);
+  }, [getOptionValue, item.value, resolvedValueOptions]);
   const handleChange = React.useCallback((event, value) => {
     applyValue(_extends({}, item, {
       value: value.map(getOptionValue)