@mui/x-data-grid 5.12.1 → 5.13.0

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

@@ -19,15 +19,15 @@ var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"
 
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-
 var _utils = require("@mui/material/utils");
 
 var _filterPanelUtils = require("./filterPanelUtils");
 
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -42,15 +42,36 @@ function GridFilterInputMultipleSingleSelect(props) {
     item,
     applyValue,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant = 'standard'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    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]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
     return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(_filterPanelUtils.getValueFromOption);
@@ -81,7 +102,7 @@ function GridFilterInputMultipleSingleSelect(props) {
 
     if (resolvedValueOptions !== undefined) {
       const itemValueIndexes = item.value.map(element => {
-        // get the index matching between values and valueoptions
+        // get the index matching between values and valueOptions
         const formattedElement = (0, _filterPanelUtils.getValueFromOption)(element);
         const index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement)) || 0;
         return index;
@@ -107,8 +128,7 @@ function GridFilterInputMultipleSingleSelect(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     multiple: true,
     limitTags: 1,
-    options: resolvedValueOptions // TODO: avoid `any`?
-    ,
+    options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -121,16 +141,19 @@ function GridFilterInputMultipleSingleSelect(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: 'singleSelect',
-      variant: "standard"
-    }))
+    renderInput: params => {
+      var _rootProps$components;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({}, params, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
+          shrink: true
+        }),
+        inputRef: focusElementRef,
+        type: "singleSelect"
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+    }
   }, other));
 }
 

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

@@ -19,13 +19,13 @@ var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete")
 
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-
 var _utils = require("@mui/material/utils");
 
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -37,11 +37,24 @@ function GridFilterInputMultipleValue(props) {
     applyValue,
     type,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   React.useEffect(() => {
     var _item$value;
 
@@ -75,16 +88,19 @@ function GridFilterInputMultipleValue(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: type || 'text',
-      variant: "standard"
-    }))
+    renderInput: params => {
+      var _rootProps$components;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({}, params, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
+          shrink: true
+        }),
+        inputRef: focusElementRef,
+        type: type || 'text'
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+    }
   }, other));
 }
 
@@ -93,7 +109,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

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

@@ -74,6 +74,10 @@ function GridFilterInputSingleSelect(props) {
   const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
+    if (currentColumn === null) {
+      return undefined;
+    }
+
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
       field: currentColumn.field
     }) : currentColumn.valueOptions;
@@ -115,8 +119,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -135,7 +139,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

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

@@ -141,8 +141,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
@@ -156,7 +156,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

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

@@ -140,8 +140,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelFooter.GridPanelFooter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
         onClick: addNewFilter,
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {}),
-        color: "primary"
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {})
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -63,7 +63,6 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -123,7 +123,6 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -75,7 +75,6 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -136,7 +136,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
         badgeContent: activeFilters.length,

package/node/constants/localeTextConstants.js

@@ -111,6 +111,7 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   groupColumn: name => `Group by ${name}`,
   unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys

package/node/hooks/features/columns/useGridColumnSpanning.js

@@ -1,26 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridColumnSpanning = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
 const useGridColumnSpanning = apiRef => {
-  const lookup = _react.default.useRef({});
-
-  const setCellColSpanInfo = _react.default.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
     const sizes = lookup.current;
 
     if (!sizes[rowId]) {
@@ -29,15 +30,13 @@ const useGridColumnSpanning = apiRef => {
 
     sizes[rowId][columnIndex] = cellColSpanInfo;
   }, []);
-
-  const getCellColSpanInfo = _react.default.useCallback((rowId, columnIndex) => {
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
     var _lookup$current$rowId;
 
     return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
   }, []); // Calculate `colSpan` for the cell.
 
-
-  const calculateCellColSpan = _react.default.useCallback(params => {
+  const calculateCellColSpan = React.useCallback(params => {
     const {
       columnIndex,
       rowId,
@@ -91,8 +90,7 @@ const useGridColumnSpanning = apiRef => {
     };
   }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
 
-
-  const calculateColSpan = _react.default.useCallback(({
+  const calculateColSpan = React.useCallback(({
     rowId,
     minFirstColumn,
     maxLastColumn
@@ -110,18 +108,15 @@ const useGridColumnSpanning = apiRef => {
       }
     }
   }, [calculateCellColSpan]);
-
   const columnSpanningApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo,
     unstable_calculateColSpan: calculateColSpan
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
-
-  const handleColumnReorderChange = _react.default.useCallback(() => {
+  const handleColumnReorderChange = React.useCallback(() => {
     // `colSpan` needs to be recalculated after column reordering
     lookup.current = {};
   }, []);
-
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };
 

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

@@ -58,7 +58,7 @@ const hasScroll = ({
 
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
-  const warningShown = React.useRef(false);
+  const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
@@ -92,21 +92,34 @@ function useGridDimensions(apiRef, props) {
       rootElement.removeChild(scrollDiv);
     }
 
-    const viewportOuterSize = {
-      width: rootDimensionsRef.current.width,
-      height: props.autoHeight ? rowsMeta.currentPageTotalHeight : rootDimensionsRef.current.height - headerHeight
-    };
-    const {
-      hasScrollX,
-      hasScrollY
-    } = hasScroll({
-      content: {
-        width: Math.round(columnsTotalWidth),
-        height: rowsMeta.currentPageTotalHeight
-      },
-      container: viewportOuterSize,
-      scrollBarSize
-    });
+    let viewportOuterSize;
+    let hasScrollX;
+    let 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
+      };
+      const scrollInformation = hasScroll({
+        content: {
+          width: Math.round(columnsTotalWidth),
+          height: rowsMeta.currentPageTotalHeight
+        },
+        container: viewportOuterSize,
+        scrollBarSize
+      });
+      hasScrollY = scrollInformation.hasScrollY;
+      hasScrollX = scrollInformation.hasScrollX;
+    }
+
     const viewportInnerSize = {
       width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),
       height: viewportOuterSize.height - (hasScrollX ? scrollBarSize : 0)
@@ -115,7 +128,8 @@ function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -165,14 +179,14 @@ function useGridDimensions(apiRef, props) {
 
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
-    if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
     if (isTestEnvironment) {

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

@@ -95,6 +95,12 @@ const useGridCellEditing = (apiRef, props) => {
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.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;
+      }
+
       let reason;
 
       if (event.key === 'Escape') {

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

@@ -199,6 +199,12 @@ const useCellEditing = (apiRef, props) => {
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, cellEditingApi, 'EditRowApi');
   const handleCellKeyDown = React.useCallback(async (params, event) => {
+    // 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;
+    }
+
     const {
       id,
       field,

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

@@ -134,6 +134,12 @@ const useGridRowEditing = (apiRef, props) => {
   }, []);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.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;
+      }
+
       let reason;
 
       if (event.key === 'Escape') {

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

@@ -199,6 +199,12 @@ const useGridRowEditing = (apiRef, props) => {
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowEditingApi, 'EditRowApi');
   const handleCellKeyDown = React.useCallback(async (params, event) => {
+    // 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;
+    }
+
     const {
       cellMode,
       isEditable

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

@@ -30,8 +30,9 @@ const cleanFilterItem = (item, apiRef) => {
   }
 
   if (cleanItem.operatorValue == null) {
-    // we select a default operator
-    const column = apiRef.current.getColumn(cleanItem.columnField);
+    // Selects a default operator
+    // We don't use `apiRef.current.getColumn` because it is not ready during state initialization
+    const column = (0, _columns.gridColumnLookupSelector)(apiRef)[cleanItem.columnField];
     cleanItem.operatorValue = column && column.filterOperators[0].value;
   }
 
@@ -208,14 +209,16 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
+    const columnsFieldsToFilter = [];
     Object.keys(appliersPerColumnField).forEach(columnField => {
       if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
         usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
+        columnsFieldsToFilter.push(columnField);
       }
     }); // Return `false` as soon as we have a quick filter value that does not match any column
 
     if (quickFilterLogicOperator === _models.GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
         var _appliersPerColumnFie, _appliersPerColumnFie2;
 
         if (appliersPerColumnField[field][index] == null) {
@@ -227,7 +230,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     } // Return `true` as soon as we have have a quick filter value that match any column
 
 
-    return sanitizedQuickFilterValues.some((value, index) => Object.keys(appliersPerColumnField).some(field => {
+    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
       var _appliersPerColumnFie3, _appliersPerColumnFie4;
 
       if (appliersPerColumnField[field][index] == null) {

package/node/hooks/features/rows/useGridRows.js

@@ -124,7 +124,7 @@ const useGridRows = (apiRef, props) => {
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
-      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
@@ -349,10 +349,23 @@ const useGridRows = (apiRef, props) => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    }
+
+    const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
+    if (areNewRowsAlreadyInState) {
+      // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
+      if (!isNewLoadingAlreadyInState) {
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          rows: (0, _extends2.default)({}, state.rows, {
+            loading: props.loading
+          })
+        }));
+        apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates = props.loading;
+        apiRef.current.forceUpdate();
+      }
 
-    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }