@mui/x-data-grid 6.0.0-beta.2 → 6.0.0-beta.3

package/CHANGELOG.md

@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.3
+
+_Feb 9, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⬅️ Add right-to-left support for the data grid (#6580) @yaredtsy
+- ⚡️ Improve grid resize performance (#7864) @cherniavskii
+- ✨ New codemods for migrating to v6 @MBilalShafi
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.3` / `@mui/x-data-grid-pro@v6.0.0-beta.3` / `@mui/x-data-grid-premium@v6.0.0-beta.3`
+
+#### Changes
+
+- [DataGrid] Add `BaseIconButton` component slot (#7329) @123joshuawu
+- [DataGrid] Allow to customize the value displayed in the filter button tooltip (#6956) @ithrforu
+- [DataGrid] Improve grid resize performance (#7864) @cherniavskii
+- [DataGrid] Make `apiRef.current.getRowWithUpdatedValues` stable (#7788) @m4theushw
+- [DataGrid] Support RTL (#6580) @yaredtsy
+- [DataGrid] Improve query selectors for selecting cell element (#7354) @yaredtsy
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#7854) @ed-ateixeira
+
+### `@mui/x-date-pickers@v6.0.0-beta.3` / `@mui/x-date-pickers-pro@v6.0.0-beta.3`
+
+#### Changes
+
+- [fields] Allow to select year 2000 on 2-digit year section (#7858) @flaviendelangle
+- [fields] Fix year editing on `day.js` (#7862) @flaviendelangle
+- [fields] Fix year editing on valid date (#7834) @flaviendelangle
+- [fields] Reset query when pressing `Backspace` or `Delete` (#7855) @flaviendelangle
+- [pickers] Clean Popper position on new pickers (#7445) @flaviendelangle
+- [pickers] Ditch pickers `skipLibCheck` (#7808) @LukasTy
+- [pickers] Improve JSDoc and resulting API docs pages (#7847) @LukasTy
+
+### `@mui/x-codemod@v6.0.0-beta.3`
+
+#### Changes
+
+- [codemod] Add more cases to `rename-selectors-and-events` codemod (#7856) @MBilalShafi
+- [codemod] Add warning message to the codemods and migration guide (#7813) @MBilalShafi
+- [codemod] Add codemod to remove unnecessary `experimentalFeatures` flag (#7836) @MBilalShafi
+- [codemod] Rename `GridFilterItem` props (#7483) @MBilalShafi
+- [codemod] Rename `linkOperators` to `logicOperators` (#7707) @MBilalShafi
+- [codemod] Replace `onCellFocusOut` prop for Data Grid (#7786) @MBilalShafi
+
+### Docs
+
+- [docs] Add a "Whats new in v6" page linked on the sidebar (#7820) @joserodolfofreitas
+- [docs] Fix hydration crash in pickers (#7734) @oliviertassinari
+- [docs] Remove no longer relevant range shortcuts section (#7840) @LukasTy
+- [docs] Use `@next` tag in grid and pickers installation instructions (#7814) @cherniavskii
+
+### Core
+
+- [core] Remove `tslint` package leftovers (#7841) @LukasTy
+- [test] Use `createDescribes` for `describeValue` and `describeValidation` (#7866) @flaviendelangle
+
 ## 6.0.0-beta.2
 
 We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
@@ -2073,6 +2132,40 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.23
+
+_Feb 9, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Brazilian Portuguese (pt-BR) locale
+- 🎉 Add banner and callouts to inform about MUI X v6 beta
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.23` / `@mui/x-data-grid-pro@v5.17.23` / `@mui/x-data-grid-premium@v5.17.23`
+
+#### Changes
+
+- [DataGrid] Allow to customize the value displayed in the filter button tooltip (#7816) @ithrforu
+- [DataGrid] Fix `getCellElement` method not working with pinned columns (#7844) @yaredtsy
+- [DataGrid] Fix stale rows issue in `unstable_replaceRows` (#7694) @MBilalShafi
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#7850) @ed-ateixeira
+
+### `@mui/x-date-pickers@v_5.0.18` / `@mui/x-date-pickers-pro@v_5.0.18`
+
+#### Changes
+
+- [pickers] Update pickers when new value has a distinct timezone (#7853) @alexfauquette
+
+### Docs
+
+- [docs] Add messages in v5 doc to inform people about v6 (#7838) @flaviendelangle
+- [docs] Fix 301 link @oliviertassinari
+
+### Core
+
+- [core] Upgrade monorepo (#7849) @cherniavskii
+
 ## 5.17.22
 
 _Feb 2, 2023_

package/components/GridRow.js

@@ -202,11 +202,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
-      let updatedRow = row;
-      if (apiRef.current.unstable_getRowWithUpdatedValues) {
-        // Only the new editing API has this method
-        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
-      }
+      const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
       const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
       const params = _extends({}, cellParams, {
         row: updatedRow
@@ -248,7 +244,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
       children: content
     }), column.field);
-  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, rowHeight, rowId, treeDepth, sortModel.length]);
   const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {

package/components/cell/GridActionsCell.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
 import MenuList from '@mui/material/MenuList';
+import { useTheme } from '@mui/material/styles';
 import { unstable_useId as useId } from '@mui/utils';
 import { gridClasses } from '../../constants/gridClasses';
 import { GridMenu } from '../menu/GridMenu';
@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
+  var _rootProps$components;
   const {
       colDef,
       id,
@@ -30,9 +31,17 @@ function GridActionsCell(props) {
   const buttonRef = React.useRef(null);
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
+  const theme = useTheme();
   const menuId = useId();
   const buttonId = useId();
   const rootProps = useGridRootProps();
+  if (!hasActions(colDef)) {
+    throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
+  }
+  const options = colDef.getActions(apiRef.current.getRowParams(id));
+  const iconButtons = options.filter(option => !option.props.showInMenu);
+  const menuButtons = options.filter(option => option.props.showInMenu);
+  const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
   React.useLayoutEffect(() => {
     if (!hasFocus) {
       Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
@@ -68,13 +77,6 @@ function GridActionsCell(props) {
       }
     }
   }), []);
-  if (!hasActions(colDef)) {
-    throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
-  }
-  const options = colDef.getActions(apiRef.current.getRowParams(id));
-  const iconButtons = options.filter(option => !option.props.showInMenu);
-  const menuButtons = options.filter(option => option.props.showInMenu);
-  const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
   React.useEffect(() => {
     if (focusedButtonIndex >= numberOfButtons) {
       setFocusedButtonIndex(numberOfButtons - 1);
@@ -104,9 +106,17 @@ function GridActionsCell(props) {
     }
     let newIndex = focusedButtonIndex;
     if (event.key === 'ArrowRight') {
-      newIndex += 1;
+      if (theme.direction === 'rtl') {
+        newIndex -= 1;
+      } else {
+        newIndex += 1;
+      }
     } else if (event.key === 'ArrowLeft') {
-      newIndex -= 1;
+      if (theme.direction === 'rtl') {
+        newIndex += 1;
+      } else {
+        newIndex -= 1;
+      }
     }
     if (newIndex < 0 || newIndex >= numberOfButtons) {
       return; // We're already in the first or last item = do nothing and let the grid listen the event
@@ -138,7 +148,7 @@ function GridActionsCell(props) {
       touchRippleRef: handleTouchRippleRef(index),
       onClick: handleButtonClick(index, button.props.onClick),
       tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(IconButton, {
+    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
@@ -149,11 +159,12 @@ function GridActionsCell(props) {
       size: "small",
       onClick: showMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1,
+      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
       children: /*#__PURE__*/_jsx(rootProps.components.MoreActionsIcon, {
         fontSize: "small"
       })
-    }), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
       onClickAway: hideMenu,
       onClick: hideMenu,
       open: open,

package/components/cell/GridActionsCellItem.js

@@ -3,9 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["label", "icon", "showInMenu", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -16,19 +16,22 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
   const handleClick = event => {
     if (onClick) {
       onClick(event);
     }
   };
   if (!showInMenu) {
-    return /*#__PURE__*/_jsx(IconButton, _extends({
+    var _rootProps$components;
+    return /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
       ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
-      onClick: handleClick,
+      onClick: handleClick
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -18,6 +17,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
+  var _rootProps$components;
   const {
     colDef,
     open,
@@ -38,7 +38,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx(IconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
       ref: iconButtonRef,
       tabIndex: -1,
       className: classes.button,
@@ -49,10 +49,11 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "true",
       "aria-controls": columnMenuId,
-      id: columnMenuButtonId,
+      id: columnMenuButtonId
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
       children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuIcon, {
         fontSize: "small"
       })
-    })
+    }))
   });
 });

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -22,7 +21,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButton(props) {
-  var _rootProps$components;
+  var _rootProps$components, _rootProps$components2;
   const {
     counter,
     field,
@@ -53,21 +52,22 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(IconButton, {
+  const iconButton = /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
-    tabIndex: -1,
+    tabIndex: -1
+  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.components.ColumnFilteredIcon, {
       className: classes.icon,
       fontSize: "small"
     })
-  });
+  }));
   return /*#__PURE__*/_jsx(rootProps.components.BaseTooltip, _extends({
     title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
     enterDelay: 1000
-  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTooltip, {
+  }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
       children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
         badgeContent: counter,

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Badge from '@mui/material/Badge';
-import IconButton from '@mui/material/IconButton';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -36,6 +35,7 @@ function getIcon(icons, direction, className, sortingOrder) {
   }, iconProps)) : null;
 }
 function GridColumnHeaderSortIconRaw(props) {
+  var _rootProps$components;
   const {
     direction,
     index,
@@ -51,13 +51,14 @@ function GridColumnHeaderSortIconRaw(props) {
   if (!iconElement) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(IconButton, {
+  const iconButton = /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
     tabIndex: -1,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    size: "small",
+    size: "small"
+  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
     children: iconElement
-  });
+  }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
     children: [index != null && /*#__PURE__*/_jsx(Badge, {
       badgeContent: index,

package/components/panel/filterPanel/GridFilterForm.js

@@ -5,7 +5,6 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
@@ -99,7 +98,7 @@ const getLogicOperatorLocaleKey = logicOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
 const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
-  var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
+  var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _rootProps$components6, _currentColumn$filter2;
   const {
       item,
       hasMultipleFilters,
@@ -238,15 +237,16 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       as: rootProps.components.BaseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
-      children: /*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
-        size: "small",
+        size: "small"
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.components.FilterPanelDeleteIcon, {
           fontSize: "small"
         })
-      })
+      }))
     })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -264,7 +264,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
-      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
         children: logicOperators.map(logicOperator => /*#__PURE__*/_jsx(OptionComponent, {
           value: logicOperator.toString(),
           children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
@@ -286,7 +286,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         value: item.field || '',
         onChange: changeColumn,
         native: isBaseSelectNative
-      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+      }, (_rootProps$components5 = rootProps.componentsProps) == null ? void 0 : _rootProps$components5.baseSelect, {
         children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
@@ -309,7 +309,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeOperator,
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, (_rootProps$components5 = rootProps.componentsProps) == null ? void 0 : _rootProps$components5.baseSelect, {
+      }, (_rootProps$components6 = rootProps.componentsProps) == null ? void 0 : _rootProps$components6.baseSelect, {
         children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_jsx(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)

package/components/toolbar/GridToolbarFilterButton.js

@@ -59,17 +59,20 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       return apiRef.current.getLocaleText('toolbarFiltersTooltipShow');
     }
     const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operator)}`).toString();
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.field].filterOperators.find(operator => operator.value === item.operator);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => {
-          var _item$value;
-          return _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
-            children: `${lookup[item.field].headerName || item.field}
+        children: activeFilters.map((item, index) => _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
+          children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${(_item$value = item.value) != null ? _item$value : ''}`
-          }, index));
-        })
+                  ${item.value ? getFilterItemValue(item) : ''}`
+        }, index)))
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

package/components/toolbar/GridToolbarQuickFilter.js

@@ -4,7 +4,6 @@ const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
-import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -46,7 +45,7 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
-  var _rootProps$components;
+  var _rootProps$components, _rootProps$components2;
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
@@ -92,19 +91,20 @@ function GridToolbarQuickFilter(props) {
       startAdornment: /*#__PURE__*/_jsx(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
       }),
-      endAdornment: /*#__PURE__*/_jsx(IconButton, {
+      endAdornment: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
         sx: {
           visibility: searchValue ? 'visible' : 'hidden'
         },
-        onClick: handleSearchReset,
+        onClick: handleSearchReset
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.components.QuickFilterClearIcon, {
           fontSize: "small"
         })
-      })
+      }))
     }
-  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+  }, other, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

package/constants/defaultGridSlotsComponents.js

@@ -5,6 +5,7 @@ import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
 import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
+import MUIIconButton from '@mui/material/IconButton';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridSkeletonCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon } from '../components';
@@ -51,6 +52,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseSelect: MUISelect,
   BaseSwitch: MUISwitch,
   BaseButton: MUIButton,
+  BaseIconButton: MUIIconButton,
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -36,6 +36,7 @@ export const useGridColumnHeaders = props => {
     innerRef: innerRefProp,
     minColumnIndex = 0
   } = props;
+  const theme = useTheme();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
@@ -87,9 +88,10 @@ export const useGridColumnHeaders = props => {
       apiRef,
       visibleRows: currentPage.rows
     });
-    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
+    const direction = theme.direction === 'ltr' ? 1 : -1;
+    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - direction * columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]);
   React.useLayoutEffect(() => {
     if (renderContext) {
       updateInnerPosition(renderContext);

package/hooks/features/editing/useGridCellEditing.js

@@ -383,10 +383,13 @@ export const useGridCellEditing = (apiRef, props) => {
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+    if (!editingState[id] || !editingState[id][field]) {
+      return apiRef.current.getRow(id);
+    }
     const {
       value
     } = editingState[id][field];
-    const row = apiRef.current.getRow(id);
     return column.valueSetter ? column.valueSetter({
       value,
       row

package/hooks/features/editing/useGridEditing.js

@@ -117,7 +117,7 @@ export const useGridEditing = (apiRef, props) => {
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
-    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues,
+    getRowWithUpdatedValues,
     unstable_getEditCellMeta: getEditCellMeta
   };
   const editingSharedPrivateApi = {

package/hooks/features/editing/useGridRowEditing.js

@@ -504,6 +504,9 @@ export const useGridRowEditing = (apiRef, props) => {
   const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
     const row = apiRef.current.getRow(id);
+    if (!editingState[id]) {
+      return apiRef.current.getRow(id);
+    }
     let rowUpdate = _extends({}, row);
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);