@mui/x-data-grid 5.15.0 → 5.15.1

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.15.1
+
+_Aug 4, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 New [page presenting the `apiRef`](https://mui.com/x/react-data-grid/api-object/) (#5273) @flaviendelangle
+- ✨ Better keyboard support for start editing cells (#5511) @oliviertassinari
+- 🌍 Improvements to different locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.1` / `@mui/x-data-grid-pro@v5.15.1` / `@mui/x-data-grid-premium@v5.15.1`
+
+#### Changes
+
+- [DataGrid] Improve start edit UX (#5511) @oliviertassinari
+- [DataGrid] Add `initialOpen` prop to `GridEditSingleSelectCell` to allow overriding initial open state (#5645) @shapaaa
+- [DataGrid] Forward `ref` to root element in `GridEditInputCell` (#5631) @Zenoo
+- [DataGrid] Toggle open state when clicking on buttons in the `GridToolbar` (#5503) @cherniavskii
+- [DataGrid] Improve German (de-DE) locale (#5586) @sebastianfrey
+- [DataGrid] Improve Korean (ko-KR) locale (#5668) @Einere
+- [DataGrid] Complete Italian (it-IT) locale (#5487) @mamodev
+
+### `@mui/x-date-pickers@v5.0.0-beta.4` / `@mui/x-date-picker-pro@5.0.0-beta.4`
+
+#### Changes
+
+- [DatePicker] Customize day formatter in the calendar (#5373) @alexfauquette
+
+### Docs
+
+- [docs] New location for the legal content (#5595) @oliviertassinari
+- [docs] Update description of `maxDateTime` prop (#5639) @jurecuhalev
+- [docs] Add missing `date-fns` dependency when opening Codesandbox demo (#5692) @cherniavskii
+
+### Core
+
+- [core] Drop usage of `GRID_EXPERIMENTAL_ENABLED` env variable (#5669) @ar7casper
+- [core] Isolate asset loading under /x/ (#5594) @oliviertassinari
+- [core] Upgrade node to v14 (#4999) @cherniavskii
+
 ## 5.15.0
 
 _Jul 29, 2022_
@@ -13,7 +54,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
   Premium users can now aggregate data in the grid.
   Extract information like sum, average, count, and others with a couple of clicks.
-  
+
   https://user-images.githubusercontent.com/45398769/181581503-77cc412e-9d9e-4de1-8bc3-c3bccc54cdaa.mp4
 
   To enable this feature, add `experimentalFeatures={{ aggregation: true }}`.

package/components/cell/GridEditInputCell.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
-export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<InputBaseProps, 'id' | 'value' | 'tabIndex'> {
+export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<InputBaseProps, 'id' | 'value' | 'tabIndex' | 'ref'> {
     debounceMs?: number;
     /**
      * Callback called when the value is changed by the user.
@@ -11,9 +11,6 @@ export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<I
      */
     onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
 }
-declare function GridEditInputCell(props: GridEditInputCellProps): JSX.Element;
-declare namespace GridEditInputCell {
-    var propTypes: any;
-}
+declare const GridEditInputCell: React.ForwardRefExoticComponent<Pick<GridEditInputCellProps, keyof GridEditInputCellProps> & React.RefAttributes<HTMLInputElement>>;
 export { GridEditInputCell };
 export declare const renderEditInputCell: (params: GridEditInputCellProps) => JSX.Element;

package/components/cell/GridEditInputCell.js

@@ -37,8 +37,7 @@ const GridEditInputCellRoot = styled(InputBase, {
     height: '100%'
   }
 }));
-
-function GridEditInputCell(props) {
+const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _rootProps$experiment;
 
   const rootProps = useGridRootProps();
@@ -86,6 +85,7 @@ function GridEditInputCell(props) {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     fullWidth: true,
@@ -94,8 +94,7 @@ function GridEditInputCell(props) {
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -106,23 +105,23 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * GridApi that let you manipulate the grid.
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.any.isRequired,
+  api: PropTypes.any,
 
   /**
    * The mode of the cell.
    */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  cellMode: PropTypes.oneOf(['edit', 'view']),
 
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: PropTypes.object.isRequired,
+  colDef: PropTypes.object,
   debounceMs: PropTypes.number,
 
   /**
    * The column field of the cell that triggered the event.
    */
-  field: PropTypes.string.isRequired,
+  field: PropTypes.string,
 
   /**
    * The cell value formatted with the column valueFormatter.
@@ -136,17 +135,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
-  getValue: PropTypes.func.isRequired,
+  getValue: PropTypes.func,
 
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: PropTypes.bool.isRequired,
+  hasFocus: PropTypes.bool,
 
   /**
    * The grid row id.
    */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
    * If true, the cell is editable.
@@ -166,17 +165,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.object,
 
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired,
+  rowNode: PropTypes.object,
 
   /**
    * the tabIndex value.
    */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]),
 
   /**
    * The cell value, but if the column has valueGetter, use getValue.

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -9,6 +9,10 @@ export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams,
      * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
      */
     onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+    /**
+     * If true, the select opens by default.
+     */
+    initialOpen?: boolean;
 }
 declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): JSX.Element;
 declare namespace GridEditSingleSelectCell {

package/components/cell/GridEditSingleSelectCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -26,6 +26,8 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
 function GridEditSingleSelectCell(props) {
   var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
+  const rootProps = useGridRootProps();
+
   const {
     id,
     value,
@@ -35,15 +37,15 @@ function GridEditSingleSelectCell(props) {
     colDef,
     hasFocus,
     error,
-    onValueChange
+    onValueChange,
+    initialOpen = rootProps.editMode === GridEditModes.Cell
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
   const ref = React.useRef();
   const inputRef = React.useRef();
-  const rootProps = useGridRootProps();
-  const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
   const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   let valueOptionsFormatted;
@@ -218,6 +220,11 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: PropTypes.bool,
+
   /**
    * If true, the cell is editable.
    */

package/components/toolbar/GridToolbarDensitySelector.js

@@ -59,11 +59,20 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   }, [densityValue, rootProps]);
 
   const handleDensitySelectorOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
-  const handleDensitySelectorClose = () => setOpen(false);
+  const handleDensitySelectorClickAway = event => {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
 
   const handleDensityUpdate = newDensity => {
     apiRef.current.setDensity(newDensity);
@@ -76,7 +85,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     }
 
     if (isHideMenuKey(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -109,7 +118,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClose,
+      onClickAway: handleDensitySelectorClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/components/toolbar/GridToolbarExportContainer.js

@@ -29,7 +29,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   const handleRef = useForkRef(ref, buttonRef);
 
   const handleMenuOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
@@ -45,6 +45,17 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  const handleMenuClickAway = event => {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   if (children == null) {
     return null;
   }
@@ -66,7 +77,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClose,
+      onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,

package/constants/envConstants.d.ts

@@ -1 +1 @@
-export declare const GRID_EXPERIMENTAL_ENABLED: boolean;
+export declare const GRID_EXPERIMENTAL_ENABLED = false;

package/constants/envConstants.js

@@ -1,4 +1,4 @@
-import { localStorageAvailable } from '../utils/utils'; // A guide to feature toggling.
+// A guide to feature toggling (deprecated)
 //
 // The feature toggle is:
 // - independent from the NODE_ENV
@@ -15,13 +15,4 @@ import { localStorageAvailable } from '../utils/utils'; // A guide to feature to
 //
 // Developers (users) are discouraged to enable the experimental feature by setting the GRID_EXPERIMENTAL_ENABLED env.
 // Instead, prefer exposing experimental APIs, for instance, a prop or a new `unstable_` module.
-
-let experimentalEnabled = false;
-
-if (typeof process !== 'undefined' && process.env.GRID_EXPERIMENTAL_ENABLED !== undefined && localStorageAvailable() && window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED')) {
-  experimentalEnabled = window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED') === 'true';
-} else if (typeof process !== 'undefined') {
-  experimentalEnabled = process.env.GRID_EXPERIMENTAL_ENABLED === 'true';
-}
-
-export const GRID_EXPERIMENTAL_ENABLED = experimentalEnabled;
+export const GRID_EXPERIMENTAL_ENABLED = false;

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

@@ -97,15 +97,14 @@ export const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if (isPrintableKey(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if (isPrintableKey(event)) {
+        reason = GridCellEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = GridCellEditStartReasons.deleteKeyDown;
       }
 

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

@@ -199,7 +199,7 @@ export const useCellEditing = (apiRef, props) => {
     const isEditMode = cellMode === GridCellModes.Edit;
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
-    if (!isEditMode && isCellEnterEditModeKeys(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
+    if (!isEditMode && isCellEnterEditModeKeys(event) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
       apiRef.current.publishEvent('cellEditStart', params, event);
     }
 
@@ -269,7 +269,7 @@ export const useCellEditing = (apiRef, props) => {
 
     apiRef.current.setCellMode(params.id, params.field, GridCellModes.Edit);
 
-    if (isKeyboardEvent(event) && isPrintableKey(event.key)) {
+    if (isKeyboardEvent(event) && isPrintableKey(event)) {
       apiRef.current.unstable_setEditCellProps({
         id: params.id,
         field: params.field,

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

@@ -153,15 +153,14 @@ export const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if (isPrintableKey(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if (isPrintableKey(event)) {
+        reason = GridRowEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = GridRowEditStartReasons.deleteKeyDown;
       }
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.0
+/** @license MUI v5.15.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/components/cell/GridEditInputCell.js

@@ -41,8 +41,7 @@ var GridEditInputCellRoot = styled(InputBase, {
     }
   });
 });
-
-function GridEditInputCell(props) {
+var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _rootProps$experiment;
 
   var rootProps = useGridRootProps();
@@ -126,6 +125,7 @@ function GridEditInputCell(props) {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     fullWidth: true,
@@ -134,8 +134,7 @@ function GridEditInputCell(props) {
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -146,23 +145,23 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * GridApi that let you manipulate the grid.
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.any.isRequired,
+  api: PropTypes.any,
 
   /**
    * The mode of the cell.
    */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  cellMode: PropTypes.oneOf(['edit', 'view']),
 
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: PropTypes.object.isRequired,
+  colDef: PropTypes.object,
   debounceMs: PropTypes.number,
 
   /**
    * The column field of the cell that triggered the event.
    */
-  field: PropTypes.string.isRequired,
+  field: PropTypes.string,
 
   /**
    * The cell value formatted with the column valueFormatter.
@@ -176,17 +175,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
-  getValue: PropTypes.func.isRequired,
+  getValue: PropTypes.func,
 
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: PropTypes.bool.isRequired,
+  hasFocus: PropTypes.bool,
 
   /**
    * The grid row id.
    */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
    * If true, the cell is editable.
@@ -206,17 +205,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.object,
 
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired,
+  rowNode: PropTypes.object,
 
   /**
    * the tabIndex value.
    */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]),
 
   /**
    * The cell value, but if the column has valueGetter, use getValue.

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -30,6 +30,8 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(option, Optio
 function GridEditSingleSelectCell(props) {
   var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
+  var rootProps = useGridRootProps();
+
   var id = props.id,
       value = props.value,
       formattedValue = props.formattedValue,
@@ -48,14 +50,15 @@ function GridEditSingleSelectCell(props) {
       isProcessingProps = props.isProcessingProps,
       error = props.error,
       onValueChange = props.onValueChange,
+      _props$initialOpen = props.initialOpen,
+      initialOpen = _props$initialOpen === void 0 ? rootProps.editMode === GridEditModes.Cell : _props$initialOpen,
       other = _objectWithoutProperties(props, _excluded);
 
   var apiRef = useGridApiContext();
   var ref = React.useRef();
   var inputRef = React.useRef();
-  var rootProps = useGridRootProps();
 
-  var _React$useState = React.useState(rootProps.editMode === 'cell'),
+  var _React$useState = React.useState(initialOpen),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       open = _React$useState2[0],
       setOpen = _React$useState2[1];
@@ -274,6 +277,11 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: PropTypes.bool,
+
   /**
    * If true, the cell is editable.
    */

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -63,12 +63,21 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
   }, [densityValue, rootProps]);
 
   var handleDensitySelectorOpen = function handleDensitySelectorOpen(event) {
-    setOpen(true);
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
     onClick == null ? void 0 : onClick(event);
   };
 
-  var handleDensitySelectorClose = function handleDensitySelectorClose() {
-    return setOpen(false);
+  var handleDensitySelectorClickAway = function handleDensitySelectorClickAway(event) {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
   };
 
   var handleDensityUpdate = function handleDensityUpdate(newDensity) {
@@ -82,7 +91,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     }
 
     if (isHideMenuKey(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -119,7 +128,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClose,
+      onClickAway: handleDensitySelectorClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -33,7 +33,9 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
   var handleRef = useForkRef(ref, buttonRef);
 
   var handleMenuOpen = function handleMenuOpen(event) {
-    setOpen(true);
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
     onClick == null ? void 0 : onClick(event);
   };
 
@@ -51,6 +53,17 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     }
   };
 
+  var handleMenuClickAway = function handleMenuClickAway(event) {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   if (children == null) {
     return null;
   }
@@ -72,7 +85,7 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClose,
+      onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,

package/legacy/constants/envConstants.js

@@ -1,4 +1,4 @@
-import { localStorageAvailable } from '../utils/utils'; // A guide to feature toggling.
+// A guide to feature toggling (deprecated)
 //
 // The feature toggle is:
 // - independent from the NODE_ENV
@@ -15,13 +15,4 @@ import { localStorageAvailable } from '../utils/utils'; // A guide to feature to
 //
 // Developers (users) are discouraged to enable the experimental feature by setting the GRID_EXPERIMENTAL_ENABLED env.
 // Instead, prefer exposing experimental APIs, for instance, a prop or a new `unstable_` module.
-
-var experimentalEnabled = false;
-
-if (typeof process !== 'undefined' && process.env.GRID_EXPERIMENTAL_ENABLED !== undefined && localStorageAvailable() && window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED')) {
-  experimentalEnabled = window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED') === 'true';
-} else if (typeof process !== 'undefined') {
-  experimentalEnabled = process.env.GRID_EXPERIMENTAL_ENABLED === 'true';
-}
-
-export var GRID_EXPERIMENTAL_ENABLED = experimentalEnabled;
+export var GRID_EXPERIMENTAL_ENABLED = false;