@mui/x-data-grid 5.12.2 → 5.12.3

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.3
+
+_Jun 23, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Swedish (sv-SE) locale on the data grid and the pickers (#5210) @mrxdst
+- 🌍 Add Dutch (nl-NL) locale on the pickers (#5237) @DDukers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.3` / `@mui/x-data-grid-pro@v5.12.3` / `@mui/x-data-grid-premium@v5.12.3`
+
+#### Changes
+
+- [DataGrid] Do not hide non-hideable column when pressing Hide All button (#5298) @flaviendelangle
+- [DataGrid] Do not regenerate the row tree when the `loading` prop changes (#5213) @flaviendelangle
+- [DataGrid] Fix the default filter operator fallback on state initialization (#5266) @flaviendelangle
+- [DataGrid] Stop using the deprecated `api` prop in the grid components (#5205) @flaviendelangle
+- [DataGrid] Add Swedish (sv-SE) locale (#5210) @mrxdst
+- [DataGridPremium] Fix detail panel on `DataGridPremium` (#5264) @flaviendelangle
+- [DataGridPremium] Fix Excel import with Remix / Vite (#5207) @alexfauquette
+- [DataGridPremium] Fix error with quick filter and grouping rows (#5238) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.0-alpha.7` / `@mui/x-date-pickers-pro@v5.0.0-alpha.7`
+
+#### Changes
+
+- [pickers] Export adapters from both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` (#5204) @flaviendelangle
+- [pickers] Add Dutch (nl-NL) locale (#5237) @DDukers
+
+### Docs
+
+- [docs] Add `DataGridPremium` to all API sections (#5196) @flaviendelangle
+- [docs] Add plan badge next to event name in the Events page (#5200) @flaviendelangle
+- [docs] Add section for theme augmentation in the picker docs (#5276) @flaviendelangle
+- [docs] Add waiting for upvote section for row group panel (#5271) @flaviendelangle
+- [docs] Disable ad on main demo page (#5301) @joserodolfofreitas
+- [docs] Fix typo in the `DateRangePicker` documentation (#5259) @flaviendelangle
+
+### Core
+
+- [core] Allow having multiple playgrounds (#5288) @alexfauquette
+- [core] Improve typing of `GridFilterInputMultipleSingleSelect` (#5206) @flaviendelangle
+- [core] Remove arbitrary new lines (#5245) @oliviertassinari
+- [core] Remove dead logic (#5282) @oliviertassinari
+- [test] Fix `inputFormat` when testing with different date adapters (#5291) @cherniavskii
+- [test] Fix date assertion in Safari 13 (#5221) @m4theushw
+- [test] Throw if date adapter is not found (#5289) @cherniavskii
+- [test] Use mock for `ResizeObserver` (#5215) @m4theushw
+
 ## v5.12.2
 
 _Jun 16, 2022_
@@ -71,7 +122,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [l10n] Update Japanese (ja-JP) locale (#5122) @hikotq
 - [l10n] Update Russian (ru-RU) locale (#5069) @Artboomy
 
-### `@mui/x-date-pickers@5.0.0-alpha.6` / `@mui/x-date-pickers-pro@5.0.0-alpha.6`
+### `@mui/x-date-pickers@v5.0.0-alpha.6` / `@mui/x-date-pickers-pro@v5.0.0-alpha.6`
 
 #### Changes
 
@@ -138,7 +189,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [l10n] Add Norwegian (Bokmål) (nb-NO) locale (#5001) @spiftire
 - [l10n] Add Turkish (tr-TR) locale (#5026) @Rassilion
 
-### `@mui/x-date-pickers@5.0.0-alpha.5` / `@mui/x-date-pickers-pro@5.0.0-alpha.5`
+### `@mui/x-date-pickers@v5.0.0-alpha.5` / `@mui/x-date-pickers-pro@v5.0.0-alpha.5`
 
 #### Breaking changes
 
@@ -211,7 +262,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [DataGridPremium] Support column spanning in the Excel export (#4830) @cherniavskii
 - [l10n] Improve Russian (ru-RU) locale (#4864) @arvkonstantin
 
-### `@mui/x-date-pickers@5.0.0-alpha.4` / `@mui/x-date-pickers-pro@5.0.0-alpha.4`
+### `@mui/x-date-pickers@v5.0.0-alpha.4` / `@mui/x-date-pickers-pro@v5.0.0-alpha.4`
 
 #### Breaking changes
 
@@ -336,7 +387,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [l10n] Improve German (de-DE) locale (#4748) @sebastianfrey
 - [l10n] Improve German (de-DE) locale (#4668) @izu-co
 
-### `@mui/x-date-pickers@5.0.0-alpha.3` / `@mui/x-date-pickers-pro@5.0.0-alpha.3`
+### `@mui/x-date-pickers@v5.0.0-alpha.3` / `@mui/x-date-pickers-pro@v5.0.0-alpha.3`
 
 #### Breaking changes
 
@@ -437,7 +488,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [DataGrid] Don't close column menu when updating rows (#4498) @m4theushw
 - [DataGridPro] Introduce row reorder (#4034) @DanailH
 
-### `@mui/x-date-pickers@5.0.0-alpha.2` / `@mui/x-date-pickers-pro@5.0.0-alpha.2`
+### `@mui/x-date-pickers@v5.0.0-alpha.2` / `@mui/x-date-pickers-pro@v5.0.0-alpha.2`
 
 - [pickers] Pass `PaperProps` to `DesktopWrapper` component (#4584) @alexfauquette
 - [TimePicker] Fix bug when time picker clear value (#4582) @alexfauquette
@@ -498,7 +549,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 - [DataGridPro] Fix toggling detail panel using keyboard (#4409) @cherniavskii
 - [l10n] Add Hungarian (hu-HU) locale (#4458) @x22tri
 
-### `@mui/x-date-pickers@5.0.0-alpha.1` / `@mui/x-date-pickers-pro@5.0.0-alpha.1`
+### `@mui/x-date-pickers@v5.0.0-alpha.1` / `@mui/x-date-pickers-pro@v5.0.0-alpha.1`
 
 - [ClockPicker] Should call `shouldDisableTime` with the hours with meridiem (#4404) @flaviendelangle
 - [MonthPicker] Clicking on a `PickersMonth` button should not trigger the form submit (#4402) @flaviendelangle

package/components/cell/GridBooleanCell.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -19,11 +20,11 @@ const useUtilityClasses = ownerState => {
 
 export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   const {
-    value,
-    api
+    value
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes
@@ -33,7 +34,7 @@ export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,
-    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
 });

package/components/cell/GridEditBooleanCell.js

@@ -8,6 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -26,7 +27,6 @@ function GridEditBooleanCell(props) {
   const {
     id: idProp,
     value,
-    api,
     field,
     className,
     hasFocus,
@@ -34,6 +34,7 @@ function GridEditBooleanCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef(null);
   const id = useId();
   const [valueState, setValueState] = React.useState(value);
@@ -50,12 +51,12 @@ function GridEditBooleanCell(props) {
     }
 
     setValueState(newValue);
-    await api.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
-  }, [api, field, idProp, onValueChange]);
+  }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/components/cell/GridEditDateCell.js

@@ -8,6 +8,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -24,7 +25,6 @@ function GridEditDateCell(props) {
   const {
     id,
     value: valueProp,
-    api,
     field,
     colDef,
     hasFocus,
@@ -34,6 +34,7 @@ function GridEditDateCell(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const isDateTime = colDef.type === 'dateTime';
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
@@ -93,12 +94,12 @@ function GridEditDateCell(props) {
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
-  }, [api, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(state => {
       var _valueTransformed$par, _state$parsed;

package/components/cell/GridEditInputCell.js

@@ -11,6 +11,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -45,7 +46,6 @@ function GridEditInputCell(props) {
   const {
     id,
     value,
-    api,
     field,
     colDef,
     hasFocus,
@@ -55,6 +55,7 @@ function GridEditInputCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
   const ownerState = {
@@ -69,13 +70,13 @@ function GridEditInputCell(props) {
     }
 
     setValueState(newValue);
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newValue,
       debounceMs
     }, event);
-  }, [api, debounceMs, field, id, onValueChange]);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/components/cell/GridEditSingleSelectCell.js

@@ -9,6 +9,7 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const renderSingleSelectOptions = (option, OptionComponent) => {
@@ -38,6 +39,7 @@ function GridEditSingleSelectCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const ref = React.useRef();
   const inputRef = React.useRef();
   const rootProps = useGridRootProps();
@@ -86,7 +88,7 @@ function GridEditSingleSelectCell(props) {
       await onValueChange(event, formattedTargetValue);
     }
 
-    const isValid = await api.setEditCellValue({
+    const isValid = await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
@@ -101,18 +103,18 @@ function GridEditSingleSelectCell(props) {
       return;
     }
 
-    const canCommit = await Promise.resolve(api.commitCellChange({
+    const canCommit = await Promise.resolve(apiRef.current.commitCellChange({
       id,
       field
     }, event));
 
     if (canCommit) {
-      api.setCellMode(id, field, 'view');
+      apiRef.current.setCellMode(id, field, 'view');
 
       if (event.key) {
         // TODO v6: remove once we stop ignoring events fired from portals
-        const params = api.getCellParams(id, field);
-        api.publishEvent('cellNavigationKeyDown', params, event);
+        const params = apiRef.current.getCellParams(id, field);
+        apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       }
     }
   };
@@ -127,13 +129,13 @@ function GridEditSingleSelectCell(props) {
       var _rootProps$experiment2;
 
       if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
-        api.stopCellEditMode({
+        apiRef.current.stopCellEditMode({
           id,
           field,
           ignoreModifications: true
         });
       } else {
-        api.setCellMode(id, field, 'view');
+        apiRef.current.setCellMode(id, field, 'view');
       }
     }
   };

package/components/panel/GridColumnsPanel.js

@@ -81,7 +81,7 @@ export function GridColumnsPanel(props) {
         return apiRef.current.setColumnVisibilityModel({});
       }
 
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
     } // TODO v6: Remove
 
 

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterItem } from '../../../models/gridFilterItem';
 import type { GridApiCommon } from '../../../models/api/gridApiCommon';
-export declare type GridFilterInputMultipleSingleSelectProps = {
+import type { ValueOptions } from '../../../models/colDef/gridColDef';
+export interface GridFilterInputMultipleSingleSelectProps extends Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput' | 'onChange' | 'value' | 'id' | 'filterOptions' | 'isOptionEqualToValue' | 'limitTags' | 'multiple'> {
     item: GridFilterItem;
     applyValue: (value: GridFilterItem) => void;
     apiRef: React.MutableRefObject<GridApiCommon>;
     focusElementRef?: React.Ref<any>;
     type?: 'singleSelect';
-} & Omit<AutocompleteProps<any[], true, false, true>, 'options' | 'renderInput'>;
+}
 declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): JSX.Element;
 declare namespace GridFilterInputMultipleSingleSelect {
     var propTypes: any;

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -26,9 +26,17 @@ function GridFilterInputMultipleSingleSelect(props) {
   const id = useId();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    return typeof (resolvedColumn == null ? void 0 : resolvedColumn.valueOptions) === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn == null ? void 0 : resolvedColumn.valueOptions;
+    if (!(resolvedColumn != null && resolvedColumn.valueOptions)) {
+      return [];
+    }
+
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+
+    return resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
     return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(getValueFromOption);
@@ -85,8 +93,7 @@ function GridFilterInputMultipleSingleSelect(props) {
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
     limitTags: 1,
-    options: resolvedValueOptions // TODO: avoid `any`?
-    ,
+    options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,

package/hooks/features/filter/gridFilterUtils.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
-import { gridColumnFieldsSelector } from '../columns';
+import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -18,8 +18,9 @@ export const cleanFilterItem = (item, apiRef) => {
   }
 
   if (cleanItem.operatorValue == null) {
-    // we select a default operator
-    const column = apiRef.current.getColumn(cleanItem.columnField);
+    // Selects a default operator
+    // We don't use `apiRef.current.getColumn` because it is not ready during state initialization
+    const column = gridColumnLookupSelector(apiRef)[cleanItem.columnField];
     cleanItem.operatorValue = column && column.filterOperators[0].value;
   }
 
@@ -185,14 +186,16 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
+    const columnsFieldsToFilter = [];
     Object.keys(appliersPerColumnField).forEach(columnField => {
       if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
         usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
+        columnsFieldsToFilter.push(columnField);
       }
     }); // Return `false` as soon as we have a quick filter value that does not match any column
 
     if (quickFilterLogicOperator === GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
         var _appliersPerColumnFie, _appliersPerColumnFie2;
 
         if (appliersPerColumnField[field][index] == null) {
@@ -204,7 +207,7 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     } // Return `true` as soon as we have have a quick filter value that match any column
 
 
-    return sanitizedQuickFilterValues.some((value, index) => Object.keys(appliersPerColumnField).some(field => {
+    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
       var _appliersPerColumnFie3, _appliersPerColumnFie4;
 
       if (appliersPerColumnField[field][index] == null) {

package/hooks/features/rows/useGridRows.js

@@ -323,10 +323,23 @@ export const useGridRows = (apiRef, props) => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    }
+
+    const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
+    if (areNewRowsAlreadyInState) {
+      // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
+      if (!isNewLoadingAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            loading: props.loading
+          })
+        }));
+        apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates = props.loading;
+        apiRef.current.forceUpdate();
+      }
 
-    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.12.2
+/** @license MUI v5.12.3
  *
  * 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/GridBooleanCell.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -31,6 +32,7 @@ export var GridBooleanCell = /*#__PURE__*/React.memo(function (props) {
       getValue = props.getValue,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var ownerState = {
     classes: rootProps.classes
@@ -42,7 +44,7 @@ export var GridBooleanCell = /*#__PURE__*/React.memo(function (props) {
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,
-    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
 });

package/legacy/components/cell/GridEditBooleanCell.js

@@ -11,6 +11,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -44,6 +45,7 @@ function GridEditBooleanCell(props) {
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var inputRef = React.useRef(null);
   var id = useId();
 
@@ -77,7 +79,7 @@ function GridEditBooleanCell(props) {
             case 4:
               setValueState(newValue);
               _context.next = 7;
-              return api.setEditCellValue({
+              return apiRef.current.setEditCellValue({
                 id: idProp,
                 field: field,
                 value: newValue
@@ -94,7 +96,7 @@ function GridEditBooleanCell(props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [api, field, idProp, onValueChange]);
+  }(), [apiRef, field, idProp, onValueChange]);
   React.useEffect(function () {
     setValueState(value);
   }, [value]);

package/legacy/components/cell/GridEditDateCell.js

@@ -11,6 +11,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -42,6 +43,7 @@ function GridEditDateCell(props) {
       other = _objectWithoutProperties(props, _excluded);
 
   var isDateTime = colDef.type === 'dateTime';
+  var apiRef = useGridApiContext();
   var inputRef = React.useRef();
   var valueTransformed = React.useMemo(function () {
     var parsedDate;
@@ -117,7 +119,7 @@ function GridEditDateCell(props) {
                 parsed: newParsedDate,
                 formatted: newFormattedDate
               });
-              api.setEditCellValue({
+              apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
                 value: newParsedDate
@@ -134,7 +136,7 @@ function GridEditDateCell(props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [api, field, id, onValueChange]);
+  }(), [apiRef, field, id, onValueChange]);
   React.useEffect(function () {
     setValueState(function (state) {
       var _valueTransformed$par, _state$parsed;

package/legacy/components/cell/GridEditInputCell.js

@@ -14,6 +14,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -66,6 +67,7 @@ function GridEditInputCell(props) {
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var inputRef = React.useRef();
 
   var _React$useState = React.useState(value),
@@ -96,7 +98,7 @@ function GridEditInputCell(props) {
 
             case 4:
               setValueState(newValue);
-              api.setEditCellValue({
+              apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
                 value: newValue,
@@ -114,7 +116,7 @@ function GridEditInputCell(props) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [api, debounceMs, field, id, onValueChange]);
+  }(), [apiRef, debounceMs, field, id, onValueChange]);
   React.useEffect(function () {
     setValueState(value);
   }, [value]);

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -13,6 +13,7 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var renderSingleSelectOptions = function renderSingleSelectOptions(option, OptionComponent) {
@@ -49,6 +50,7 @@ function GridEditSingleSelectCell(props) {
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var ref = React.useRef();
   var inputRef = React.useRef();
   var rootProps = useGridRootProps();
@@ -114,7 +116,7 @@ function GridEditSingleSelectCell(props) {
 
             case 6:
               _context.next = 8;
-              return api.setEditCellValue({
+              return apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
                 value: formattedTargetValue
@@ -140,7 +142,7 @@ function GridEditSingleSelectCell(props) {
 
             case 13:
               _context.next = 15;
-              return Promise.resolve(api.commitCellChange({
+              return Promise.resolve(apiRef.current.commitCellChange({
                 id: id,
                 field: field
               }, event));
@@ -149,12 +151,12 @@ function GridEditSingleSelectCell(props) {
               canCommit = _context.sent;
 
               if (canCommit) {
-                api.setCellMode(id, field, 'view');
+                apiRef.current.setCellMode(id, field, 'view');
 
                 if (event.key) {
                   // TODO v6: remove once we stop ignoring events fired from portals
-                  params = api.getCellParams(id, field);
-                  api.publishEvent('cellNavigationKeyDown', params, event);
+                  params = apiRef.current.getCellParams(id, field);
+                  apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
                 }
               }
 
@@ -181,13 +183,13 @@ function GridEditSingleSelectCell(props) {
       var _rootProps$experiment2;
 
       if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
-        api.stopCellEditMode({
+        apiRef.current.stopCellEditMode({
           id: id,
           field: field,
           ignoreModifications: true
         });
       } else {
-        api.setCellMode(id, field, 'view');
+        apiRef.current.setCellMode(id, field, 'view');
       }
     }
   };