@mui/x-data-grid 5.12.2 → 5.13.1

package/legacy/components/cell/GridEditInputCell.js

@@ -14,6 +14,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -66,6 +67,7 @@ function GridEditInputCell(props) {
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var inputRef = React.useRef();
 
   var _React$useState = React.useState(value),
@@ -96,7 +98,7 @@ function GridEditInputCell(props) {
 
             case 4:
               setValueState(newValue);
-              api.setEditCellValue({
+              apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
                 value: newValue,
@@ -114,7 +116,7 @@ function GridEditInputCell(props) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [api, debounceMs, field, id, onValueChange]);
+  }(), [apiRef, debounceMs, field, id, onValueChange]);
   React.useEffect(function () {
     setValueState(value);
   }, [value]);

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -13,6 +13,7 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var renderSingleSelectOptions = function renderSingleSelectOptions(option, OptionComponent) {
@@ -49,6 +50,7 @@ function GridEditSingleSelectCell(props) {
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var ref = React.useRef();
   var inputRef = React.useRef();
   var rootProps = useGridRootProps();
@@ -114,7 +116,7 @@ function GridEditSingleSelectCell(props) {
 
             case 6:
               _context.next = 8;
-              return api.setEditCellValue({
+              return apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
                 value: formattedTargetValue
@@ -140,7 +142,7 @@ function GridEditSingleSelectCell(props) {
 
             case 13:
               _context.next = 15;
-              return Promise.resolve(api.commitCellChange({
+              return Promise.resolve(apiRef.current.commitCellChange({
                 id: id,
                 field: field
               }, event));
@@ -149,12 +151,12 @@ function GridEditSingleSelectCell(props) {
               canCommit = _context.sent;
 
               if (canCommit) {
-                api.setCellMode(id, field, 'view');
+                apiRef.current.setCellMode(id, field, 'view');
 
                 if (event.key) {
                   // TODO v6: remove once we stop ignoring events fired from portals
-                  params = api.getCellParams(id, field);
-                  api.publishEvent('cellNavigationKeyDown', params, event);
+                  params = apiRef.current.getCellParams(id, field);
+                  apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
                 }
               }
 
@@ -181,13 +183,13 @@ function GridEditSingleSelectCell(props) {
       var _rootProps$experiment2;
 
       if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
-        api.stopCellEditMode({
+        apiRef.current.stopCellEditMode({
           id: id,
           field: field,
           ignoreModifications: true
         });
       } else {
-        api.setCellMode(id, field, 'view');
+        apiRef.current.setCellMode(id, field, 'view');
       }
     }
   };

package/legacy/components/panel/GridColumnsPanel.js

@@ -91,7 +91,9 @@ export function GridColumnsPanel(props) {
         return apiRef.current.setColumnVisibilityModel({});
       }
 
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(function (col) {
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(function (col) {
+        return col.hideable !== false;
+      }).map(function (col) {
         return [col.field, false];
       })));
     } // TODO v6: Remove

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
+var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+    _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -164,6 +165,10 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   var baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
   var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
+
+  var InputComponentProps = valueInputProps.InputComponentProps,
+      valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
+
   var sortedFilterableColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
@@ -352,14 +357,14 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
-    }, baseFormControlProps, valueInputProps, {
-      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputProps.className),
+    }, baseFormControlProps, valueInputPropsOther, {
+      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       children: currentOperator != null && currentOperator.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps)) : null
     }))]
   }));
 });

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

@@ -39,8 +39,8 @@ export function GridFilterInputBoolean(props) {
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
     select: true,
+    variant: "standard",
     SelectProps: _extends({
       native: isSelectNative,
       displayEmpty: true

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

@@ -64,8 +64,8 @@ function GridFilterInputDate(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -85,7 +85,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -2,14 +2,14 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { getValueFromOption } from './filterPanelUtils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var isOptionEqualToValue = function isOptionEqualToValue(option, value) {
@@ -24,14 +24,36 @@ function GridFilterInputMultipleSingleSelect(props) {
       type = props.type,
       apiRef = props.apiRef,
       focusElementRef = props.focusElementRef,
+      color = props.color,
+      error = props.error,
+      helperText = props.helperText,
+      size = props.size,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'standard' : _props$variant,
       other = _objectWithoutProperties(props, _excluded);
 
+  var TextFieldProps = {
+    color: color,
+    error: error,
+    helperText: helperText,
+    size: size,
+    variant: variant
+  };
   var id = useId();
+  var rootProps = useGridRootProps();
   var resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var resolvedValueOptions = React.useMemo(function () {
-    return typeof (resolvedColumn == null ? void 0 : resolvedColumn.valueOptions) === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn == null ? void 0 : resolvedColumn.valueOptions;
+    if (!(resolvedColumn != null && resolvedColumn.valueOptions)) {
+      return [];
+    }
+
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+
+    return resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   var resolvedFormattedValueOptions = React.useMemo(function () {
     return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(getValueFromOption);
@@ -62,7 +84,7 @@ function GridFilterInputMultipleSingleSelect(props) {
 
     if (resolvedValueOptions !== undefined) {
       var itemValueIndexes = item.value.map(function (element) {
-        // get the index matching between values and valueoptions
+        // get the index matching between values and valueOptions
         var formattedElement = getValueFromOption(element);
         var index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formatedOption) {
           return formatedOption === formattedElement;
@@ -94,8 +116,7 @@ function GridFilterInputMultipleSingleSelect(props) {
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
     limitTags: 1,
-    options: resolvedValueOptions // TODO: avoid `any`?
-    ,
+    options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -113,16 +134,17 @@ function GridFilterInputMultipleSingleSelect(props) {
       });
     },
     renderInput: function renderInput(params) {
-      return /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+      var _rootProps$components;
+
+      return /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({}, params, {
         label: apiRef.current.getLocaleText('filterPanelInputLabel'),
         placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
         InputLabelProps: _extends({}, params.InputLabelProps, {
           shrink: true
         }),
         inputRef: focusElementRef,
-        type: 'singleSelect',
-        variant: "standard"
-      }));
+        type: "singleSelect"
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
     }
   }, other));
 }

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

@@ -2,13 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridFilterInputMultipleValue(props) {
@@ -17,14 +17,28 @@ function GridFilterInputMultipleValue(props) {
       type = props.type,
       apiRef = props.apiRef,
       focusElementRef = props.focusElementRef,
+      color = props.color,
+      error = props.error,
+      helperText = props.helperText,
+      size = props.size,
+      variant = props.variant,
       other = _objectWithoutProperties(props, _excluded);
 
+  var TextFieldProps = {
+    color: color,
+    error: error,
+    helperText: helperText,
+    size: size,
+    variant: variant
+  };
+
   var _React$useState = React.useState(item.value || []),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       filterValueState = _React$useState2[0],
       setFilterValueState = _React$useState2[1];
 
   var id = useId();
+  var rootProps = useGridRootProps();
   React.useEffect(function () {
     var _item$value;
 
@@ -61,16 +75,17 @@ function GridFilterInputMultipleValue(props) {
       });
     },
     renderInput: function renderInput(params) {
-      return /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+      var _rootProps$components;
+
+      return /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({}, params, {
         label: apiRef.current.getLocaleText('filterPanelInputLabel'),
         placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
         InputLabelProps: _extends({}, params.InputLabelProps, {
           shrink: true
         }),
         inputRef: focusElementRef,
-        type: type || 'text',
-        variant: "standard"
-      }));
+        type: type || 'text'
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
     }
   }, other));
 }
@@ -80,7 +95,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -57,6 +57,10 @@ function GridFilterInputSingleSelect(props) {
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var currentValueOptions = React.useMemo(function () {
+    if (currentColumn === null) {
+      return undefined;
+    }
+
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
       field: currentColumn.field
     }) : currentColumn.valueOptions;
@@ -98,8 +102,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -118,7 +122,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -124,8 +124,8 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputProps: InputProps,
     InputLabelProps: {
       shrink: true
@@ -139,7 +139,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -70,21 +70,33 @@ export function useGridDimensions(apiRef, props) {
       rootElement.removeChild(scrollDiv);
     }
 
-    var viewportOuterSize = {
-      width: rootDimensionsRef.current.width,
-      height: props.autoHeight ? rowsMeta.currentPageTotalHeight : rootDimensionsRef.current.height - headerHeight
-    };
-
-    var _hasScroll = hasScroll({
-      content: {
-        width: Math.round(columnsTotalWidth),
-        height: rowsMeta.currentPageTotalHeight
-      },
-      container: viewportOuterSize,
-      scrollBarSize: scrollBarSize
-    }),
-        hasScrollX = _hasScroll.hasScrollX,
-        hasScrollY = _hasScroll.hasScrollY;
+    var viewportOuterSize;
+    var hasScrollX;
+    var hasScrollY;
+
+    if (props.autoHeight) {
+      hasScrollY = false;
+      hasScrollX = Math.round(columnsTotalWidth) > rootDimensionsRef.current.width;
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
+      };
+    } else {
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rootDimensionsRef.current.height - headerHeight
+      };
+      var scrollInformation = hasScroll({
+        content: {
+          width: Math.round(columnsTotalWidth),
+          height: rowsMeta.currentPageTotalHeight
+        },
+        container: viewportOuterSize,
+        scrollBarSize: scrollBarSize
+      });
+      hasScrollY = scrollInformation.hasScrollY;
+      hasScrollX = scrollInformation.hasScrollX;
+    }
 
     var viewportInnerSize = {
       width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),

package/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -78,6 +78,12 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   }, [apiRef]);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     if (params.cellMode === GridCellModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       var reason;
 
       if (event.key === 'Escape') {
@@ -100,7 +106,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       var _reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 

package/legacy/hooks/features/editRows/useGridCellEditing.old.js

@@ -189,16 +189,24 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              if (!(event.which === 229)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
               id = params.id, field = params.field, cellMode = params.cellMode, isEditable = params.isEditable;
 
               if (isEditable) {
-                _context.next = 3;
+                _context.next = 5;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 3:
+            case 5:
               isEditMode = cellMode === GridCellModes.Edit;
               isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
@@ -220,7 +228,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
               }
 
               if (!(isEditMode && isCellEditCommitKeys(event.key))) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
 
@@ -228,25 +236,25 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
                 id: id,
                 field: field
               };
-              _context.next = 11;
+              _context.next = 13;
               return apiRef.current.commitCellChange(commitParams, event);
 
-            case 11:
+            case 13:
               isValid = _context.sent;
 
               if (isValid) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 14:
+            case 16:
               if (isEditMode && isCellExitEditModeKeys(event.key)) {
                 apiRef.current.publishEvent('cellEditStop', params, event);
               }
 
-            case 15:
+            case 17:
             case "end":
               return _context.stop();
           }

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -116,6 +116,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   }, []);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     if (params.cellMode === GridRowModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       var reason;
 
       if (event.key === 'Escape') {
@@ -156,7 +162,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       var _reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 

package/legacy/hooks/features/editRows/useGridRowEditing.old.js

@@ -241,62 +241,70 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
+              if (!(event.which === 229)) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 2:
               cellMode = params.cellMode, isEditable = params.isEditable;
 
               if (isEditable) {
-                _context3.next = 3;
+                _context3.next = 5;
                 break;
               }
 
               return _context3.abrupt("return");
 
-            case 3:
+            case 5:
               isEditMode = cellMode === GridCellModes.Edit;
               rowParams = apiRef.current.getRowParams(params.id);
 
               if (!isEditMode) {
-                _context3.next = 18;
+                _context3.next = 20;
                 break;
               }
 
               if (!(event.key === 'Enter')) {
-                _context3.next = 15;
+                _context3.next = 17;
                 break;
               }
 
-              _context3.next = 9;
+              _context3.next = 11;
               return apiRef.current.commitRowChange(params.id);
 
-            case 9:
+            case 11:
               isValid = _context3.sent;
 
               if (!(!isValid && (_props$experimentalFe3 = props.experimentalFeatures) != null && _props$experimentalFe3.preventCommitWhileValidating)) {
-                _context3.next = 12;
+                _context3.next = 14;
                 break;
               }
 
               return _context3.abrupt("return");
 
-            case 12:
+            case 14:
               apiRef.current.publishEvent('rowEditStop', rowParams, event);
-              _context3.next = 16;
+              _context3.next = 18;
               break;
 
-            case 15:
+            case 17:
               if (event.key === 'Escape') {
                 apiRef.current.publishEvent('rowEditStop', rowParams, event);
               }
 
-            case 16:
-              _context3.next = 19;
+            case 18:
+              _context3.next = 21;
               break;
 
-            case 18:
+            case 20:
               if (event.key === 'Enter') {
                 apiRef.current.publishEvent('rowEditStart', rowParams, event);
               }
 
-            case 19:
+            case 21:
             case "end":
               return _context3.stop();
           }