@mui/x-data-grid 5.15.0 → 5.15.1

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -57,11 +57,18 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   }, [densityValue, rootProps]);
 
   const handleDensitySelectorOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick?.(event);
   };
 
-  const handleDensitySelectorClose = () => setOpen(false);
+  const handleDensitySelectorClickAway = event => {
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    buttonRef.current?.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
 
   const handleDensityUpdate = newDensity => {
     apiRef.current.setDensity(newDensity);
@@ -74,7 +81,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     }
 
     if (isHideMenuKey(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -107,7 +114,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/modern/components/toolbar/GridToolbarExportContainer.js

@@ -27,7 +27,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   const handleRef = useForkRef(ref, buttonRef);
 
   const handleMenuOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick?.(event);
   };
 
@@ -43,6 +43,15 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  const handleMenuClickAway = event => {
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    buttonRef.current?.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   if (children == null) {
     return null;
   }
@@ -64,7 +73,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/modern/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/modern/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/modern/hooks/features/editRows/useGridCellEditing.old.js

@@ -195,7 +195,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);
     }
 
@@ -265,7 +265,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/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -151,15 +151,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/modern/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/modern/locales/deDE.js

@@ -111,13 +111,13 @@ const deDEGrid = {
   expandDetailPanel: 'Aufklappen',
   collapseDetailPanel: 'Zuklappen',
   // Row reordering text
-  rowReorderingHeaderName: 'Reihen neu ordnen' // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  rowReorderingHeaderName: 'Reihen neu ordnen',
+  // Aggregation
+  aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelSum: 'Summe',
+  aggregationFunctionLabelAvg: 'Mittelwert',
+  aggregationFunctionLabelMin: 'Minimum',
+  aggregationFunctionLabelMax: 'Maximum',
+  aggregationFunctionLabelSize: 'Anzahl'
 };
 export const deDE = getGridLocalization(deDEGrid, deDECore);

package/modern/locales/itIT.js

@@ -21,15 +21,15 @@ const itITGrid = {
   toolbarFiltersTooltipShow: 'Mostra i filtri',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtri attivi` : `${count} filtro attivo`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Cerca…',
+  toolbarQuickFilterLabel: 'Cerca',
+  toolbarQuickFilterDeleteIconLabel: 'Resetta',
   // Export selector toolbar button text
   toolbarExport: 'Esporta',
   toolbarExportLabel: 'Esporta',
   toolbarExportCSV: 'Esporta in CSV',
   toolbarExportPrint: 'Stampa',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Scarica come Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Cerca colonna',
   columnsPanelTextFieldPlaceholder: 'Titolo della colonna',
@@ -39,7 +39,7 @@ const itITGrid = {
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
   filterPanelDeleteIconLabel: 'Rimuovi',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'Operatore logico',
   filterPanelOperators: 'Operatori',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'E (and)',
@@ -85,10 +85,10 @@ const itITGrid = {
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} di ${totalCount.toLocaleString()}`,
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Seleziona',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: 'Seleziona tutte le righe',
+  checkboxSelectionUnselectAllRows: 'Deseleziona tutte le righe',
+  checkboxSelectionSelectRow: 'Seleziona riga',
+  checkboxSelectionUnselectRow: 'Deseleziona riga',
   // Boolean cell text
   booleanCellTrueLabel: 'vero',
   booleanCellFalseLabel: 'falso',
@@ -105,13 +105,13 @@ const itITGrid = {
   // Grouping columns
   groupingColumnHeaderName: 'Gruppo',
   groupColumn: name => `Raggruppa per ${name}`,
-  unGroupColumn: name => `Annulla raggruppamento per ${name}` // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  unGroupColumn: name => `Annulla raggruppamento per ${name}`,
+  // Master/detail
+  detailPanelToggle: 'Abilita pannello dettagli',
+  expandDetailPanel: 'Espandi',
+  collapseDetailPanel: 'Comprimi',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-  // Aggregation
+  rowReorderingHeaderName: 'Riordinamento righe' // Aggregation
   // aggregationMenuItemHeader: 'Aggregation',
   // aggregationFunctionLabelSum: 'sum',
   // aggregationFunctionLabelAvg: 'avg',

package/modern/locales/koKR.js

@@ -6,8 +6,8 @@ const koKRGrid = {
   noResultsOverlayLabel: '결과값이 없습니다.',
   errorOverlayDefaultLabel: '오류가 발생했습니다.',
   // Density selector toolbar button text
-  toolbarDensity: '라인 간격',
-  toolbarDensityLabel: '라인 간격',
+  toolbarDensity: '행 간격',
+  toolbarDensityLabel: '행 간격',
   toolbarDensityCompact: '좁게',
   toolbarDensityStandard: '기본',
   toolbarDensityComfortable: '넓게',
@@ -21,15 +21,15 @@ const koKRGrid = {
   toolbarFiltersTooltipShow: '필터 표시',
   toolbarFiltersTooltipActive: count => `${count}건의 필터를 적용중`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: '검색…',
+  toolbarQuickFilterLabel: '검색',
+  toolbarQuickFilterDeleteIconLabel: '초기화',
   // Export selector toolbar button text
   toolbarExport: '내보내기',
   toolbarExportLabel: '내보내기',
-  toolbarExportCSV: 'CSV다운로드',
+  toolbarExportCSV: 'CSV로 내보내기',
   toolbarExportPrint: '프린트',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Excel로 내보내기',
   // Columns panel text
   columnsPanelTextFieldLabel: '열 검색',
   columnsPanelTextFieldPlaceholder: '열 이름',
@@ -39,7 +39,7 @@ const koKRGrid = {
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
   filterPanelDeleteIconLabel: '삭제',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: '논리 연산자',
   filterPanelOperators: '연산자',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: '그리고',
@@ -85,39 +85,39 @@ const koKRGrid = {
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} / ${totalCount.toLocaleString()}`,
   // Checkbox selection text
   checkboxSelectionHeaderName: '선택',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: '모든 행 선택',
+  checkboxSelectionUnselectAllRows: '모든 행 선택 해제',
+  checkboxSelectionSelectRow: '행 선택',
+  checkboxSelectionUnselectRow: '행 선택 해제',
   // Boolean cell text
   booleanCellTrueLabel: '참',
   booleanCellFalseLabel: '거짓',
   // Actions cell more text
   actionsCellMore: '더보기',
   // Column pinning text
-  // pinToLeft: 'Pin to left',
-  // pinToRight: 'Pin to right',
-  // unpin: 'Unpin',
+  pinToLeft: '왼쪽에 고정',
+  pinToRight: '오른쪽에 고정',
+  unpin: '고정 해제',
   // Tree Data
   treeDataGroupingHeaderName: '그룹',
   treeDataExpand: '하위노드 펼치기',
-  treeDataCollapse: '하위노드 접기' // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
+  treeDataCollapse: '하위노드 접기',
+  // Grouping columns
+  groupingColumnHeaderName: '그룹',
+  groupColumn: name => `${name} 값으로 그룹 생성`,
+  unGroupColumn: name => `${name} 값으로 그룹 해제`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  detailPanelToggle: '상세 패널 토글',
+  expandDetailPanel: '열기',
+  collapseDetailPanel: '접기',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  rowReorderingHeaderName: '행 재배치',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  aggregationMenuItemHeader: '총계',
+  aggregationFunctionLabelSum: '합',
+  aggregationFunctionLabelAvg: '평균',
+  aggregationFunctionLabelMin: '최소값',
+  aggregationFunctionLabelMax: '최대값',
+  aggregationFunctionLabelSize: '크기'
 };
 export const koKR = getGridLocalization(koKRGrid, koKRCore);

package/modern/utils/keyboardUtils.js

@@ -10,13 +10,18 @@ export const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
 export const isPageKeys = key => key.indexOf('Page') === 0;
 export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace'; // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+// We need to ignore shortcuts, for example: select all:
+// - Windows: Ctrl+A, event.ctrlKey is true
+// - macOS: ⌘ Command+A, event.metaKey is true
 
-export const isPrintableKey = key => key.length === 1;
+export function isPrintableKey(event) {
+  return event.key.length === 1 && event.ctrlKey === false && event.metaKey === false;
+}
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
 export const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
-export const isCellEnterEditModeKeys = key => isEnterKey(key) || isDeleteKeys(key) || isPrintableKey(key);
+export const isCellEnterEditModeKeys = event => isEnterKey(event.key) || isDeleteKeys(event.key) || isPrintableKey(event);
 export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 export const isNavigationKey = key => isHomeOrEndKeys(key) || isArrowKeys(key) || isPageKeys(key) || isSpaceKey(key);

package/node/components/cell/GridEditInputCell.js

@@ -5,8 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridEditInputCell = GridEditInputCell;
-exports.renderEditInputCell = void 0;
+exports.renderEditInputCell = exports.GridEditInputCell = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -65,8 +64,7 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
     height: '100%'
   }
 }));
-
-function GridEditInputCell(props) {
+const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _rootProps$experiment;
 
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -112,6 +110,7 @@ function GridEditInputCell(props) {
     }
   }, [hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCellRoot, (0, _extends2.default)({
+    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     fullWidth: true,
@@ -120,8 +119,8 @@ function GridEditInputCell(props) {
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GridLoadIcon, {}) : undefined
   }, other));
-}
-
+});
+exports.GridEditInputCell = GridEditInputCell;
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -132,23 +131,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.default.any.isRequired,
+  api: _propTypes.default.any,
 
   /**
    * The mode of the cell.
    */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  cellMode: _propTypes.default.oneOf(['edit', 'view']),
 
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: _propTypes.default.object.isRequired,
+  colDef: _propTypes.default.object,
   debounceMs: _propTypes.default.number,
 
   /**
    * The column field of the cell that triggered the event.
    */
-  field: _propTypes.default.string.isRequired,
+  field: _propTypes.default.string,
 
   /**
    * The cell value formatted with the column valueFormatter.
@@ -162,17 +161,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.default.func.isRequired,
+  getValue: _propTypes.default.func,
 
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: _propTypes.default.bool.isRequired,
+  hasFocus: _propTypes.default.bool,
 
   /**
    * The grid row id.
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
   /**
    * If true, the cell is editable.
@@ -192,17 +191,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.object,
 
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: _propTypes.default.object.isRequired,
+  rowNode: _propTypes.default.object,
 
   /**
    * the tabIndex value.
    */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  tabIndex: _propTypes.default.oneOf([-1, 0]),
 
   /**
    * The cell value, but if the column has valueGetter, use getValue.

package/node/components/cell/GridEditSingleSelectCell.js

@@ -32,7 +32,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 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); }
 
@@ -52,6 +52,7 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
 function GridEditSingleSelectCell(props) {
   var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     id,
     value,
@@ -61,14 +62,14 @@ function GridEditSingleSelectCell(props) {
     colDef,
     hasFocus,
     error,
-    onValueChange
+    onValueChange,
+    initialOpen = rootProps.editMode === _gridEditRowModel.GridEditModes.Cell
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const ref = React.useRef();
   const inputRef = React.useRef();
-  const rootProps = (0, _useGridRootProps.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;
@@ -243,6 +244,11 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    */
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
 
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: _propTypes.default.bool,
+
   /**
    * If true, the cell is editable.
    */

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -87,11 +87,20 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   }, [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);
@@ -104,7 +113,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     }
 
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -137,7 +146,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClose,
+      onClickAway: handleDensitySelectorClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
         id: densityMenuId,

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -52,7 +52,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   const handleRef = (0, _utils.useForkRef)(ref, buttonRef);
 
   const handleMenuOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
@@ -68,6 +68,17 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     }
   };
 
+  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;
   }
@@ -89,7 +100,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClose,
+      onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
         id: menuId,

package/node/constants/envConstants.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GRID_EXPERIMENTAL_ENABLED = void 0;
-
-var _utils = require("../utils/utils");
-
-// A guide to feature toggling.
+// A guide to feature toggling (deprecated)
 //
 // The feature toggle is:
 // - independent from the NODE_ENV
@@ -24,13 +21,5 @@ var _utils = require("../utils/utils");
 //
 // 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 && (0, _utils.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';
-}
-
-const GRID_EXPERIMENTAL_ENABLED = experimentalEnabled;
+const GRID_EXPERIMENTAL_ENABLED = false;
 exports.GRID_EXPERIMENTAL_ENABLED = GRID_EXPERIMENTAL_ENABLED;