@mui/x-data-grid 6.18.2 → 6.18.4

package/CHANGELOG.md

@@ -3,6 +3,105 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.4
+
+_Dec 8, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Add [Pickers FAQ page](https://mui.com/x/react-date-pickers/faq/)
+- 🌍 Improve Danish (da-DK) locale on Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.4`
+
+- [DataGrid] Fix cell slot style override (#11215) @oliviertassinari
+- [l10n] Improve Danish (da-DK) locale (#11346) @goibon
+
+#### `@mui/x-data-grid-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.4`.
+
+#### `@mui/x-data-grid-premium@6.18.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.4`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.4`
+
+- [pickers] Fix `MultiSectionDigitalClock` issues (#11308) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.4`.
+
+### Docs
+
+- [docs] Fix typo (#11323) @cadam11
+- [docs] Add FAQ page (#11347) @noraleonte
+
+## 6.18.3
+
+_Dec 4, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📈 Fix a lot of Charts package issues
+- 🌍 Improve Bulgarian (bg-BG) locale on Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.3`
+
+- [DataGrid] Fix cell editing adding a leading "v" on paste (#11166) @prasad5795
+- [DataGrid] Fix handling of event target in portal (#11209) @cherniavskii
+- [DataGrid] Fix `onFilterModelChange` being fired with stale field value (#11244) @gitstart
+- [l10n] Improve Bulgarian (bg-BG) locale (#10856) (#11206) @Kristiqn95
+
+#### `@mui/x-data-grid-pro@6.18.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.3`.
+
+#### `@mui/x-data-grid-premium@6.18.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.3`, plus:
+
+- [DataGridPremium] Fix aggregated column ignoring column definition changes (#11176) @cherniavskii
+- [DataGridPremium] Fix custom filter operators not working on aggregated column (#11201) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.3`
+
+- [pickers] Correctly format `MultiSectionDigitalClock` number sections (#11297) @LukasTy
+- [pickers] Expand field placeholder methods flexibility by providing `format` parameter (#11254) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.3`.
+
+### Charts / `@mui/x-charts@6.18.3`
+
+- [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11213) @michelengelen
+- [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
+- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix error with empty dataset (#11063) @alexfauquette
+- [charts] Fix export strategy (#11235) @alexfauquette
+
+### Docs
+
+- [docs] Add LTS section to support page (#11300) @joserodolfofreitas
+- [docs] Add end v6 blogpost to whats new page (#11299) @joserodolfofreitas
+- [docs] Document charts composition (#10710) @alexfauquette
+- [docs] Fix version links (#11167) @LukasTy
+- [docs] Improve Data Grid togglable columns example (#11241) @MBilalShafi
+- [docs] Split charts overview and getting started in distinct pages (#10910) @alexfauquette
+
 ## 6.18.2
 
 _Nov 23, 2023_
@@ -288,7 +387,7 @@ Same changes as in `@mui/x-date-pickers@6.16.3`, plus:
 
 - [charts] Add reference links to area + bar chart components (#10652) @michelengelen
 - [charts] Add reference links to line chart + sparkline components (#10650) @michelengelen
-- [charts] Add reference links to pie + scatter chart components  (#10653) @michelengelen
+- [charts] Add reference links to pie + scatter chart components (#10653) @michelengelen
 - [charts] Render only when `width` and `height` are resolved (#10714) @alexfauquette
 - [charts] Support animation on `BarChart` (#9926) @alexfauquette
 - [charts] Use new text component to avoid tick label overflow on x-axis (#10648) @alexfauquette
@@ -364,6 +463,7 @@ It adds line break support and avoids overlapping text in the legend.
 This comes with some breaking changes.
 
 - The DOM structure is modified. An intermediary `<tspan />` element has been added. This can impact how your style is applied.
+
   ```diff
   - <text>The label</text>
   + <text><tspan>The label</tspan></text>

package/components/GridRow.js

@@ -13,7 +13,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName } from '../utils/domUtils';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
@@ -137,9 +137,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
-    // The target is not an element when triggered by a Select inside the cell
-    // See https://github.com/mui/material-ui/issues/10534
-    if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
 

package/components/cell/GridCell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "style", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver", "style"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -171,6 +171,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       isSelected,
       rowId,
       tabIndex,
+      style: styleProp,
       value,
       width,
       className,
@@ -237,15 +238,14 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         border: 0
       };
     }
-    const cellStyle = {
+    const cellStyle = _extends({
       minWidth: width,
       maxWidth: width,
       minHeight: height,
-      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-    };
-
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -408,7 +408,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       onKeyDown,
       onKeyUp,
       onDragEnter,
-      onDragOver
+      onDragOver,
+      style: styleProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded3);
   const apiRef = useGridApiContext();
@@ -499,22 +500,21 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef, field, rowId]);
   const style = React.useMemo(() => {
     if (isNotVisible) {
-      return {
+      return _extends({
         padding: 0,
         opacity: 0,
         width: 0,
         border: 0
-      };
+      }, styleProp);
     }
-    const cellStyle = {
+    const cellStyle = _extends({
       minWidth: width,
       maxWidth: width,
       minHeight: height,
-      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-    };
-
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;

package/components/cell/GridEditDateCell.js

@@ -63,7 +63,6 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const hasUpdatedEditValueOnMount = React.useRef(false);
   const parseValueToDate = React.useCallback(value => {
     if (value === '') {
       return null;
@@ -109,26 +108,8 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
-  const handleInputRef = el => {
-    inputRef.current = el;
-    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
-      const inputValue = inputRef.current.value;
-      const parsedDate = parseValueToDate(inputValue);
-      setValueState({
-        parsed: parsedDate,
-        formatted: inputValue
-      });
-      apiRef.current.setEditCellValue({
-        id,
-        field,
-        value: parsedDate
-      });
-      hasUpdatedEditValueOnMount.current = true;
-    }
-  };
   return /*#__PURE__*/_jsx(StyledInputBase, _extends({
-    inputRef: handleInputRef,
+    inputRef: inputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -7,6 +7,7 @@ import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGroup
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -85,7 +86,7 @@ function GridColumnGroupHeader(props) {
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, renderParams, event);

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -9,6 +9,7 @@ import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -68,7 +69,7 @@ function GridColumnHeaderItem(props) {
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);

package/components/panel/filterPanel/GridFilterForm.js

@@ -178,8 +178,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     // try to keep the same operator when column change
     const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
 
-    // Erase filter value if the input component is modified
-    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    // Erase filter value if the input component or filtered column type is modified
+    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
     applyFilterChanges(_extends({}, item, {
       field,
       operator: newOperator.value,

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -43,7 +43,7 @@ function GridFilterInputValue(props) {
   }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
     const itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id) {
+    if (itemPlusTag.fromInput !== id || item.value === undefined) {
       var _item$value2;
       setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
     }

package/hooks/features/editing/useGridCellEditing.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -101,7 +101,7 @@ export const useGridCellEditing = (apiRef, props) => {
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        reason = GridCellEditStartReasons.printableKeyDown;
+        reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
       } else if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -121,24 +121,13 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      colDef
+      reason
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
-    if (reason === GridCellEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startCellEditModeParams.deleteValue = true;
-      } else {
-        const initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-        startCellEditModeParams.initialValue = initialValue;
-      }
-    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown || reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.pasteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
     apiRef.current.startCellEditMode(startCellEditModeParams);
@@ -248,17 +237,13 @@ export const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    let unstable_updateValueOnRender = false;
     if (deleteValue || initialValue) {
       newValue = deleteValue ? '' : initialValue;
-      unstable_updateValueOnRender = true;
     }
     const newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false,
-      unstable_updateValueOnRender
+      isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
@@ -423,7 +408,9 @@ export const useGridCellEditing = (apiRef, props) => {
       updateCellModesModel(cellModesModelProp);
     }
   }, [cellModesModelProp, updateCellModesModel]);
-  React.useEffect(() => {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(() => {
     const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later

package/hooks/features/editing/useGridRowEditing.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -172,7 +172,6 @@ export const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = _extends({}, rowParams, {
           field: params.field,
-          key: event.key,
           reason
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
@@ -183,24 +182,13 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      columns
+      reason
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
-    if (reason === GridRowEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startRowEditModeParams.deleteValue = !!field;
-      } else {
-        const colDef = columns.find(col => col.field === field);
-        startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-      }
-    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown || reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
@@ -323,17 +311,13 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
       let newValue = apiRef.current.getCellValue(id, field);
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      let unstable_updateValueOnRender = false;
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         newValue = deleteValue ? '' : initialValue;
-        unstable_updateValueOnRender = true;
       }
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false,
-        unstable_updateValueOnRender
+        isProcessingProps: false
       };
       return acc;
     }, {});
@@ -553,7 +537,9 @@ export const useGridRowEditing = (apiRef, props) => {
       updateRowModesModel(rowModesModelProp);
     }
   }, [rowModesModelProp, updateRowModesModel]);
-  React.useEffect(() => {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(() => {
     const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -15,6 +15,7 @@ import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -414,7 +415,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
 

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -14,6 +14,7 @@ import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -289,7 +290,7 @@ export const useGridRowSelection = (apiRef, props) => {
 
     // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
     if (isNavigationKey(event.key) && event.shiftKey) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.18.2
+ * @mui/x-data-grid v6.18.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -67,7 +67,7 @@ export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGr
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';

package/internals/index.js

@@ -54,7 +54,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';

package/legacy/components/GridRow.js

@@ -15,7 +15,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName } from '../utils/domUtils';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
@@ -141,9 +141,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
-      // The target is not an element when triggered by a Select inside the cell
-      // See https://github.com/mui/material-ui/issues/10534
-      if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+      if (isEventTargetInPortal(event)) {
         return;
       }
 

package/legacy/components/cell/GridCell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "style", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver", "style"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -165,6 +165,7 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     isSelected = props.isSelected,
     rowId = props.rowId,
     tabIndex = props.tabIndex,
+    styleProp = props.style,
     value = props.value,
     width = props.width,
     className = props.className,
@@ -238,15 +239,14 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
         border: 0
       };
     }
-    var cellStyle = {
+    var cellStyle = _extends({
       minWidth: width,
       maxWidth: width,
       minHeight: height,
-      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-    };
-
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp]);
   React.useEffect(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -412,6 +412,7 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyUp = props.onKeyUp,
     onDragEnter = props.onDragEnter,
     onDragOver = props.onDragOver,
+    styleProp = props.style,
     other = _objectWithoutProperties(props, _excluded3);
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
@@ -507,22 +508,21 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [apiRef, field, rowId]);
   var style = React.useMemo(function () {
     if (isNotVisible) {
-      return {
+      return _extends({
         padding: 0,
         opacity: 0,
         width: 0,
         border: 0
-      };
+      }, styleProp);
     }
-    var cellStyle = {
+    var cellStyle = _extends({
       minWidth: width,
       maxWidth: width,
       minHeight: height,
-      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-    };
-
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp]);
   React.useEffect(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;