@mui/x-data-grid 6.6.0 → 6.8.0

package/legacy/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -23,7 +23,7 @@ function GridColumnHeaderMenu(_ref) {
       apiRef.current.hideColumnMenu();
     }
   }, [apiRef, target]);
-  if (!target) {
+  if (!target || !colDef) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridMenu, {

package/legacy/components/panel/GridColumnsPanel.js

@@ -218,8 +218,22 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
   autoFocusSearchField: PropTypes.bool,
+  /**
+   * If `true`, the `Hide all` button will not be displayed.
+   * @default false
+   */
   disableHideAllButton: PropTypes.bool,
+  /**
+   * If `true`, the `Show all` button will be disabled
+   * @default false
+   */
   disableShowAllButton: PropTypes.bool,
   /**
    * Returns the list of togglable columns.

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "label"];
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -9,18 +10,19 @@ import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BooleanOperatorContainer = styled('div')({
+var BooleanOperatorContainer = styled('div')(_defineProperty({
   display: 'flex',
-  alignItems: 'flex-end',
+  alignItems: 'center',
   width: '100%'
-});
+}, "& button", {
+  margin: 'auto 0px 5px 5px'
+}));
 function GridFilterInputBoolean(props) {
   var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   var item = props.item,
     applyValue = props.applyValue,
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
@@ -64,7 +66,6 @@ function GridFilterInputBoolean(props) {
         variant: "standard",
         native: isSelectNative,
         displayEmpty: true,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         inputProps: {
           ref: focusElementRef,
           tabIndex: tabIndex
@@ -100,7 +101,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any.isRequired
   })]),
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -16,7 +16,6 @@ function GridFilterInputDate(props) {
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
     InputProps = props.InputProps,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
@@ -73,8 +72,6 @@ function GridFilterInputDate(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled: disabled
     }, InputProps, {
@@ -96,7 +93,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

@@ -1,8 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -34,11 +35,13 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
     }), label);
   });
 };
-var SingleSelectOperatorContainer = styled('div')({
+var SingleSelectOperatorContainer = styled('div')(_defineProperty({
   display: 'flex',
   alignItems: 'flex-end',
   width: '100%'
-});
+}, "& button", {
+  margin: 'auto 0px 5px 5px'
+}));
 function GridFilterInputSingleSelect(props) {
   var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
@@ -51,7 +54,6 @@ function GridFilterInputSingleSelect(props) {
     placeholder = props.placeholder,
     tabIndex = props.tabIndex,
     labelProp = props.label,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     others = _objectWithoutProperties(props, _excluded);
@@ -129,7 +131,6 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValueState,
         onChange: onFilterChange,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         variant: "standard",
         type: type || 'text',
         inputProps: {
@@ -174,7 +175,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
    * @returns {string} The value to be used.
    */
   getOptionValue: PropTypes.func,
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -17,7 +17,6 @@ function GridFilterInputValue(props) {
     focusElementRef = props.focusElementRef,
     tabIndex = props.tabIndex,
     disabled = props.disabled,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     InputProps = props.InputProps,
@@ -68,8 +67,6 @@ function GridFilterInputValue(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled: disabled
     }, InputProps, {
@@ -94,7 +91,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

@@ -188,7 +188,15 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    * If not specified, the order is derived from the `columns` prop.
    */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
   disableAddFilterButton: PropTypes.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
   disableRemoveAllButton: PropTypes.bool,
   /**
    * Props passed to each filter form.

package/legacy/components/toolbar/GridToolbar.js

@@ -14,8 +14,8 @@ import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
-  // TODO v6: think about where export option should be passed.
-  // from componentProps={{ toolbarExport: { ...exportOption} }} seems to be more appropriate
+  // TODO v7: think about where export option should be passed.
+  // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   var className = props.className,
     csvOptions = props.csvOptions,
     printOptions = props.printOptions,

package/legacy/components/virtualization/GridVirtualScroller.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
@@ -31,14 +29,13 @@ var VirtualScrollerRoot = styled('div', {
   }
 });
 var GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
-  var className = props.className,
-    other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();
   var classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(VirtualScrollerRoot, _extends({
-    ref: ref,
-    className: clsx(classes.root, className),
+    ref: ref
+  }, props, {
+    className: clsx(classes.root, props.className),
     ownerState: rootProps
-  }, other));
+  }));
 });
 export { GridVirtualScroller };

package/legacy/components/virtualization/GridVirtualScrollerContent.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "style"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
@@ -8,9 +6,8 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    overflowedContent = ownerState.overflowedContent;
+var useUtilityClasses = function useUtilityClasses(props, overflowedContent) {
+  var classes = props.classes;
   var slots = {
     root: ['virtualScrollerContent', overflowedContent && 'virtualScrollerContent--overflowed']
   };
@@ -24,19 +21,15 @@ var VirtualScrollerContentRoot = styled('div', {
   }
 })({});
 var GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
-  var className = props.className,
-    style = props.style,
-    other = _objectWithoutProperties(props, _excluded);
+  var _props$style;
   var rootProps = useGridRootProps();
-  var ownerState = _extends({}, rootProps, {
-    overflowedContent: !rootProps.autoHeight && (style == null ? void 0 : style.minHeight) === 'auto'
-  });
-  var classes = useUtilityClasses(ownerState);
+  var overflowedContent = !rootProps.autoHeight && ((_props$style = props.style) == null ? void 0 : _props$style.minHeight) === 'auto';
+  var classes = useUtilityClasses(rootProps, overflowedContent);
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
-    ref: ref,
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    style: style
-  }, other));
+    ref: ref
+  }, props, {
+    ownerState: rootProps,
+    className: clsx(classes.root, props.className)
+  }));
 });
 export { GridVirtualScrollerContent };

package/legacy/constants/defaultGridSlotsComponents.js

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridCell, GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton } from '../components';
+import { GridCellV7 } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
 import materialSlots from '../material';
+
+// TODO: camelCase these key. It's a private helper now.
+// Remove then need to call `uncapitalizeObjectKeys`.
 export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
-  Cell: GridCell,
+  Cell: GridCellV7,
   SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/constants/localeTextConstants.js

@@ -82,10 +82,10 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   headerFilterOperatorIsAnyOf: 'Is any of',
   'headerFilterOperator=': 'Equals',
   'headerFilterOperator!=': 'Not equals',
-  'headerFilterOperator>': 'Is greater than',
-  'headerFilterOperator>=': 'Is greater than or equal to',
-  'headerFilterOperator<': 'Is less than',
-  'headerFilterOperator<=': 'Is less than or equal to',
+  'headerFilterOperator>': 'Greater than',
+  'headerFilterOperator>=': 'Greater than or equal to',
+  'headerFilterOperator<': 'Less than',
+  'headerFilterOperator<=': 'Less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/legacy/hooks/core/useGridApiInitialization.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Store } from '../../utils/Store';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
@@ -37,8 +38,10 @@ var wrapPublicApi = function wrapPublicApi(publicApi) {
 export function useGridApiInitialization(inputApiRef, props) {
   var publicApiRef = React.useRef();
   if (!publicApiRef.current) {
+    var state = {};
     publicApiRef.current = {
-      state: {},
+      state: state,
+      store: Store.create(state),
       instanceId: {
         id: globalId
       }

package/legacy/hooks/core/useGridStateInitialization.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["stateId"];
 import * as React from 'react';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../utils';
@@ -13,11 +11,7 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
     _React$useState2 = _slicedToArray(_React$useState, 2),
     rawForceUpdate = _React$useState2[1];
   var registerControlState = React.useCallback(function (controlStateItem) {
-    var stateId = controlStateItem.stateId,
-      others = _objectWithoutProperties(controlStateItem, _excluded);
-    controlStateMapRef.current[stateId] = _extends({}, others, {
-      stateId: stateId
-    });
+    controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
   var setState = React.useCallback(function (state, reason) {
     var newState;
@@ -64,6 +58,7 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
       if (apiRef.current.publishEvent) {
         apiRef.current.publishEvent('stateChange', newState);
       }
+      apiRef.current.store.update(newState);
     }
     if (updatedControlStateIds.length === 1) {
       var _updatedControlStateI = updatedControlStateIds[0],

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

@@ -55,10 +55,7 @@ export var useGridClipboard = function useGridClipboard(apiRef, props) {
   var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   var clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   var handleCopy = React.useCallback(function (event) {
-    var isModifierKeyPressed = event.ctrlKey || event.metaKey;
-    // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
-    // be wrong with a Dvorak keyboard (as if pressing J).
-    if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) {
+    if (!((event.ctrlKey || event.metaKey) && event.key === 'c')) {
       return;
     }
 

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

@@ -11,7 +11,7 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
+import { areRenderContextsEqual, getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 var GridColumnHeaderRow = styled('div', {
@@ -62,12 +62,18 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var _React$useState5 = React.useState(null),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     renderContext = _React$useState6[0],
-    setRenderContext = _React$useState6[1];
+    setRenderContextRaw = _React$useState6[1];
   var prevRenderContext = React.useRef(renderContext);
   var prevScrollLeft = React.useRef(0);
   var currentPage = useGridVisibleRows(apiRef, rootProps);
   var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
   var headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  var setRenderContext = React.useCallback(function (nextRenderContext) {
+    if (renderContext && nextRenderContext && areRenderContextsEqual(renderContext, nextRenderContext)) {
+      return;
+    }
+    setRenderContextRaw(nextRenderContext);
+  }, [renderContext]);
   React.useEffect(function () {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -150,7 +156,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
-  }, [updateInnerPosition]);
+  }, [updateInnerPosition, setRenderContext]);
   var handleColumnResizeStart = React.useCallback(function (params) {
     return setResizeCol(params.field);
   }, []);

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

@@ -18,7 +18,7 @@ import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
-var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
+var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
 export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -128,7 +128,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     var id = params.id,
       field = params.field,
       reason = params.reason,
-      key = params.key;
+      key = params.key,
+      colDef = params.colDef;
     var startCellEditModeParams = {
       id: id,
       field: field
@@ -139,7 +140,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
         // The sequence of events makes the key pressed by the end-users update the textbox directly.
         startCellEditModeParams.deleteValue = true;
       } else {
-        startCellEditModeParams.initialValue = key;
+        var initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
+        startCellEditModeParams.initialValue = initialValue;
       }
     } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;

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

@@ -17,7 +17,8 @@ import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
-var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
+import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
+var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
 export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -120,6 +121,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         reason = GridRowEditStopReasons.enterKeyDown;
       } else if (event.key === 'Tab') {
         var columnFields = gridColumnFieldsSelector(apiRef).filter(function (field) {
+          var column = apiRef.current.getColumn(field);
+          if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+            return true;
+          }
           return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
         });
         if (event.shiftKey) {
@@ -144,8 +149,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         }
       }
       if (reason) {
-        var rowParams = apiRef.current.getRowParams(params.id);
-        var newParams = _extends({}, rowParams, {
+        var newParams = _extends({}, apiRef.current.getRowParams(params.id), {
           reason: reason,
           field: params.field
         });
@@ -172,8 +176,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         _reason = GridRowEditStartReasons.deleteKeyDown;
       }
       if (_reason) {
-        var _rowParams = apiRef.current.getRowParams(params.id);
-        var _newParams = _extends({}, _rowParams, {
+        var rowParams = apiRef.current.getRowParams(params.id);
+        var _newParams = _extends({}, rowParams, {
           field: params.field,
           key: event.key,
           reason: _reason
@@ -186,7 +190,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var id = params.id,
       field = params.field,
       reason = params.reason,
-      key = params.key;
+      key = params.key,
+      columns = params.columns;
     var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
@@ -197,7 +202,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         // The sequence of events makes the key pressed by the end-users update the textbox directly.
         startRowEditModeParams.deleteValue = !!field;
       } else {
-        startRowEditModeParams.initialValue = key;
+        var colDef = columns.find(function (col) {
+          return col.field === field;
+        });
+        startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
       }
     } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -208,30 +208,32 @@ export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(
     };
   };
 };
-export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel, apiRef) {
-  var _filterModel$quickFil2, _filterModel$logicOpe;
-  var cleanedFilterItems = filterModel.items.filter(function (item) {
-    return getFilterCallbackFromItem(item, apiRef) !== null;
-  });
-  var cleanedAllFilterItemResults = allFilterItemResults.filter(function (result) {
-    return result != null;
-  });
-  var cleanedAllQuickFilterResults = allQuickFilterResults.filter(function (result) {
-    return result != null;
-  });
-
-  // Defaultize operators
-  var quickFilterLogicOperator = (_filterModel$quickFil2 = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil2 : getDefaultGridFilterModel().quickFilterLogicOperator;
-  var logicOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : getDefaultGridFilterModel().logicOperator;
+var isNotNull = function isNotNull(result) {
+  return result != null;
+};
+var filterModelItems = function filterModelItems(cache, apiRef, items) {
+  if (!cache.cleanedFilterItems) {
+    cache.cleanedFilterItems = items.filter(function (item) {
+      return getFilterCallbackFromItem(item, apiRef) !== null;
+    });
+  }
+  return cache.cleanedFilterItems;
+};
+export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) {
+  var cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+  var cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
+  var cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 
   // get result for filter items model
-  if (cleanedAllFilterItemResults.length > 0) {
+  if (cleanedFilterItemResults.length > 0) {
+    var _filterModel$logicOpe;
     // Return true if the item pass with one of the rows
     var filterItemPredicate = function filterItemPredicate(item) {
-      return cleanedAllFilterItemResults.some(function (filterItemResult) {
+      return cleanedFilterItemResults.some(function (filterItemResult) {
         return filterItemResult[item.id];
       });
     };
+    var logicOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : getDefaultGridFilterModel().logicOperator;
     if (logicOperator === GridLogicOperator.And) {
       var passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -246,13 +248,15 @@ export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQ
   }
 
   // get result for quick filter model
-  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+  if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+    var _filterModel$quickFil2;
     // Return true if the item pass with one of the rows
     var quickFilterValuePredicate = function quickFilterValuePredicate(value) {
-      return cleanedAllQuickFilterResults.some(function (quickFilterValueResult) {
+      return cleanedQuickFilterResults.some(function (quickFilterValueResult) {
         return quickFilterValueResult[value];
       });
     };
+    var quickFilterLogicOperator = (_filterModel$quickFil2 = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil2 : getDefaultGridFilterModel().quickFilterLogicOperator;
     if (quickFilterLogicOperator === GridLogicOperator.And) {
       var passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {