@mui/x-data-grid 6.18.2 → 6.18.4

package/locales/daDK.js

@@ -47,47 +47,45 @@ const daDKGrid = {
   filterPanelInputLabel: 'Værdi',
   filterPanelInputPlaceholder: 'Filter værdi',
   // Filter operators text
-  filterOperatorContains: 'Indeholder',
-  filterOperatorEquals: 'Lig med',
-  filterOperatorStartsWith: 'Begynder med',
-  filterOperatorEndsWith: 'Ender med',
-  filterOperatorIs: 'Er lig med',
-  filterOperatorNot: 'Er ikke lig med',
-  filterOperatorAfter: 'Efter',
-  filterOperatorOnOrAfter: 'På eller efter',
-  filterOperatorBefore: 'Før',
-  filterOperatorOnOrBefore: 'På eller før',
-  filterOperatorIsEmpty: 'Indeholder ikke data',
-  filterOperatorIsNotEmpty: 'Indeholder data',
+  filterOperatorContains: 'indeholder',
+  filterOperatorEquals: 'lig med',
+  filterOperatorStartsWith: 'begynder med',
+  filterOperatorEndsWith: 'ender med',
+  filterOperatorIs: 'er lig med',
+  filterOperatorNot: 'er ikke lig med',
+  filterOperatorAfter: 'efter',
+  filterOperatorOnOrAfter: 'på eller efter',
+  filterOperatorBefore: 'før',
+  filterOperatorOnOrBefore: 'på eller før',
+  filterOperatorIsEmpty: 'indeholder ikke data',
+  filterOperatorIsNotEmpty: 'indeholder data',
   filterOperatorIsAnyOf: 'indeholder en af',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Indeholder',
+  headerFilterOperatorEquals: 'Lig med',
+  headerFilterOperatorStartsWith: 'Begynder med',
+  headerFilterOperatorEndsWith: 'Ender med',
+  headerFilterOperatorIs: 'Er lig med',
+  headerFilterOperatorNot: 'Er ikke lig med',
+  headerFilterOperatorAfter: 'Efter',
+  headerFilterOperatorOnOrAfter: 'På eller efter',
+  headerFilterOperatorBefore: 'Før',
+  headerFilterOperatorOnOrBefore: 'På eller før',
+  headerFilterOperatorIsEmpty: 'Indeholder ikke data',
+  headerFilterOperatorIsNotEmpty: 'Indeholder data',
+  headerFilterOperatorIsAnyOf: 'Indeholder en af',
+  'headerFilterOperator=': 'Lig med',
+  'headerFilterOperator!=': 'Ikke lig med',
+  'headerFilterOperator>': 'Større end',
+  'headerFilterOperator>=': 'Større end eller lig med',
+  'headerFilterOperator<': 'Mindre end',
+  'headerFilterOperator<=': 'Mindre end eller lig med',
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/models/api/gridEditingApi.d.ts

@@ -18,10 +18,6 @@ export type GridRowModesModelProps = ({
 export type GridRowModesModel = Record<GridRowId, GridRowModesModelProps>;
 export interface GridEditCellMeta {
     changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
-    /**
-     * Determines if `setEditCellValue` should be called on the first render to sync the value.
-     */
-    unstable_updateValueOnRender?: boolean;
 }
 export interface GridEditingSharedApi {
     /**
@@ -81,6 +77,7 @@ export interface GridStartCellEditModeParams {
     /**
      * The initial value for the field.
      * If `deleteValue` is also true, this value is not used.
+     * @deprecated No longer needed.
      */
     initialValue?: any;
 }
@@ -126,6 +123,7 @@ export interface GridStartRowEditModeParams {
     /**
      * The initial value for the given `fieldToFocus`.
      * If `deleteValue` is also true, this value is not used.
+     * @deprecated No longer needed.
      */
     initialValue?: string;
 }

package/models/params/gridEditCellParams.d.ts

@@ -29,7 +29,8 @@ declare enum GridCellEditStartReasons {
     enterKeyDown = "enterKeyDown",
     cellDoubleClick = "cellDoubleClick",
     printableKeyDown = "printableKeyDown",
-    deleteKeyDown = "deleteKeyDown"
+    deleteKeyDown = "deleteKeyDown",
+    pasteKeyDown = "pasteKeyDown"
 }
 /**
  * Params passed to the `cellEditStart` event.
@@ -41,6 +42,7 @@ export interface GridCellEditStartParams<R extends GridValidRowModel = any, V =
     reason?: GridCellEditStartReasons;
     /**
      * If the reason is related to a keyboard event, it contains which key was pressed.
+     * @deprecated No longer needed.
      */
     key?: string;
 }

package/models/params/gridEditCellParams.js

@@ -6,6 +6,7 @@ var GridCellEditStartReasons = /*#__PURE__*/function (GridCellEditStartReasons)
   GridCellEditStartReasons["cellDoubleClick"] = "cellDoubleClick";
   GridCellEditStartReasons["printableKeyDown"] = "printableKeyDown";
   GridCellEditStartReasons["deleteKeyDown"] = "deleteKeyDown";
+  GridCellEditStartReasons["pasteKeyDown"] = "pasteKeyDown";
   return GridCellEditStartReasons;
 }(GridCellEditStartReasons || {});
 /**

package/models/params/gridRowParams.d.ts

@@ -74,6 +74,7 @@ export interface GridRowEditStartParams<R extends GridValidRowModel = any> exten
     reason?: GridRowEditStartReasons;
     /**
      * If the reason is related to a keyboard event, it contains which key was pressed.
+     * @deprecated No longer needed.
      */
     key?: string;
 }

package/modern/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/modern/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';
@@ -170,6 +170,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       isSelected,
       rowId,
       tabIndex,
+      style: styleProp,
       value,
       width,
       className,
@@ -236,15 +237,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;
@@ -406,7 +406,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       onKeyDown,
       onKeyUp,
       onDragEnter,
-      onDragOver
+      onDragOver,
+      style: styleProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded3);
   const apiRef = useGridApiContext();
@@ -497,22 +498,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/modern/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;
@@ -108,26 +107,8 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
-  const handleInputRef = el => {
-    inputRef.current = el;
-    if (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/modern/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 {
@@ -84,7 +85,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/modern/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 => {
@@ -67,7 +68,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/modern/components/panel/filterPanel/GridFilterForm.js

@@ -176,8 +176,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?.InputComponent;
+    // Erase filter value if the input component or filtered column type is modified
+    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
     applyFilterChanges(_extends({}, item, {
       field,
       operator: newOperator.value,

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

@@ -42,7 +42,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) {
       setFilterValueState(String(item.value ?? ''));
     }
   }, [id, item]);

package/modern/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);
@@ -422,7 +407,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/modern/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';
@@ -171,7 +171,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);
@@ -182,24 +181,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);
@@ -322,17 +310,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;
     }, {});
@@ -552,7 +536,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/modern/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 || [])];
@@ -413,7 +414,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/modern/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;
@@ -283,7 +284,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/modern/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/modern/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/modern/locales/bgBG.js

@@ -60,34 +60,32 @@ const bgBGGrid = {
   filterOperatorIsEmpty: 'е празен',
   filterOperatorIsNotEmpty: 'не е празен',
   filterOperatorIsAnyOf: 'е някой от',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Съдържа',
+  headerFilterOperatorEquals: 'Равнo',
+  headerFilterOperatorStartsWith: 'Започва с',
+  headerFilterOperatorEndsWith: 'Завършва с',
+  headerFilterOperatorIs: 'Равно е на',
+  headerFilterOperatorNot: 'Не се равнява на',
+  headerFilterOperatorAfter: 'След',
+  headerFilterOperatorOnOrAfter: 'След (включително)',
+  headerFilterOperatorBefore: 'Преди',
+  headerFilterOperatorOnOrBefore: 'Преди (включително)',
+  headerFilterOperatorIsEmpty: 'Празен',
+  headerFilterOperatorIsNotEmpty: 'Не е празен',
+  headerFilterOperatorIsAnyOf: 'Всичко от',
+  'headerFilterOperator=': 'Равно',
+  'headerFilterOperator!=': 'Различно',
+  'headerFilterOperator>': 'По-голямо от',
+  'headerFilterOperator>=': 'По-голямо или равно на',
+  'headerFilterOperator<': 'По-малко от',
+  'headerFilterOperator<=': 'По-малко или равно на',
   // Filter values text
   filterValueAny: 'всякакви',
   filterValueTrue: 'вярно',
@@ -135,19 +133,17 @@ const bgBGGrid = {
   groupColumn: name => `Групирай по ${name}`,
   unGroupColumn: name => `Спри групиране по ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Превключване на панела с детайли',
   expandDetailPanel: 'Разгъване',
   collapseDetailPanel: 'Свиване',
   // Row reordering text
-  rowReorderingHeaderName: 'Подредба на редове'
-
+  rowReorderingHeaderName: 'Подредба на редове',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Агрегиране',
+  aggregationFunctionLabelSum: 'сума',
+  aggregationFunctionLabelAvg: 'срст',
+  aggregationFunctionLabelMin: 'мин',
+  aggregationFunctionLabelMax: 'макс',
+  aggregationFunctionLabelSize: 'размер'
 };
-
 export const bgBG = getGridLocalization(bgBGGrid, bgBGCore);