@mui/x-data-grid 6.0.3 → 6.1.0

package/legacy/components/cell/GridEditDateCell.js

@@ -74,54 +74,66 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
+  var hasUpdatedEditValueOnMount = React.useRef(false);
+  var parseValueToDate = React.useCallback(function (value) {
+    if (value === '') {
+      return null;
+    }
+    var _value$split = value.split('T'),
+      _value$split2 = _slicedToArray(_value$split, 2),
+      date = _value$split2[0],
+      time = _value$split2[1];
+    var _date$split = date.split('-'),
+      _date$split2 = _slicedToArray(_date$split, 3),
+      year = _date$split2[0],
+      month = _date$split2[1],
+      day = _date$split2[2];
+    var parsedDate = new Date();
+    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    parsedDate.setHours(0, 0, 0, 0);
+    if (time) {
+      var _time$split = time.split(':'),
+        _time$split2 = _slicedToArray(_time$split, 2),
+        hours = _time$split2[0],
+        minutes = _time$split2[1];
+      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+    }
+    return parsedDate;
+  }, []);
   var handleChange = React.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var newFormattedDate, newParsedDate, _newFormattedDate$spl, _newFormattedDate$spl2, date, time, _date$split, _date$split2, year, month, day, _time$split, _time$split2, hours, minutes;
+      var newFormattedDate, newParsedDate;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              newFormattedDate = event.target.value;
-              if (newFormattedDate === '') {
-                newParsedDate = null;
-              } else {
-                _newFormattedDate$spl = newFormattedDate.split('T'), _newFormattedDate$spl2 = _slicedToArray(_newFormattedDate$spl, 2), date = _newFormattedDate$spl2[0], time = _newFormattedDate$spl2[1];
-                _date$split = date.split('-'), _date$split2 = _slicedToArray(_date$split, 3), year = _date$split2[0], month = _date$split2[1], day = _date$split2[2];
-                newParsedDate = new Date();
-                newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
-                newParsedDate.setHours(0, 0, 0, 0);
-                if (time) {
-                  _time$split = time.split(':'), _time$split2 = _slicedToArray(_time$split, 2), hours = _time$split2[0], minutes = _time$split2[1];
-                  newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
-                }
-              }
-              if (!onValueChange) {
-                _context.next = 5;
-                break;
-              }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            newFormattedDate = event.target.value;
+            newParsedDate = parseValueToDate(newFormattedDate);
+            if (!onValueChange) {
               _context.next = 5;
-              return onValueChange(event, newParsedDate);
-            case 5:
-              setValueState({
-                parsed: newParsedDate,
-                formatted: newFormattedDate
-              });
-              apiRef.current.setEditCellValue({
-                id: id,
-                field: field,
-                value: newParsedDate
-              }, event);
-            case 7:
-            case "end":
-              return _context.stop();
-          }
+              break;
+            }
+            _context.next = 5;
+            return onValueChange(event, newParsedDate);
+          case 5:
+            setValueState({
+              parsed: newParsedDate,
+              formatted: newFormattedDate
+            });
+            apiRef.current.setEditCellValue({
+              id: id,
+              field: field,
+              value: newParsedDate
+            }, event);
+          case 7:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [apiRef, field, id, onValueChange]);
+  }(), [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(function () {
     setValueState(function (state) {
       var _valueTransformed$par, _state$parsed;
@@ -136,8 +148,26 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
+  var meta = apiRef.current.unstable_getEditCellMeta(id, field);
+  var handleInputRef = function handleInputRef(el) {
+    inputRef.current = el;
+    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+      var inputValue = inputRef.current.value;
+      var parsedDate = parseValueToDate(inputValue);
+      setValueState({
+        parsed: parsedDate,
+        formatted: inputValue
+      });
+      apiRef.current.setEditCellValue({
+        id: id,
+        field: field,
+        value: parsedDate
+      });
+      hasUpdatedEditValueOnMount.current = true;
+    }
+  };
   return /*#__PURE__*/_jsx(StyledInputBase, _extends({
-    inputRef: inputRef,
+    inputRef: handleInputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/legacy/components/cell/GridEditInputCell.js

@@ -67,34 +67,32 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var newValue, column, parsedValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              newValue = event.target.value;
-              if (!onValueChange) {
-                _context.next = 4;
-                break;
-              }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            newValue = event.target.value;
+            if (!onValueChange) {
               _context.next = 4;
-              return onValueChange(event, newValue);
-            case 4:
-              column = apiRef.current.getColumn(field);
-              parsedValue = newValue;
-              if (column.valueParser) {
-                parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
-              }
-              setValueState(parsedValue);
-              apiRef.current.setEditCellValue({
-                id: id,
-                field: field,
-                value: parsedValue,
-                debounceMs: debounceMs,
-                unstable_skipValueParser: true
-              }, event);
-            case 9:
-            case "end":
-              return _context.stop();
-          }
+              break;
+            }
+            _context.next = 4;
+            return onValueChange(event, newValue);
+          case 4:
+            column = apiRef.current.getColumn(field);
+            parsedValue = newValue;
+            if (column.valueParser) {
+              parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+            }
+            setValueState(parsedValue);
+            apiRef.current.setEditCellValue({
+              id: id,
+              field: field,
+              value: parsedValue,
+              debounceMs: debounceMs,
+              unstable_skipValueParser: true
+            }, event);
+          case 9:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -83,35 +83,33 @@ function GridEditSingleSelectCell(props) {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var target, formattedTargetValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!(!isSingleSelectColDef(colDef) || !valueOptions)) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return");
-            case 2:
-              setOpen(false);
-              target = event.target; // NativeSelect casts the value to a string.
-              formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
-              if (!onValueChange) {
-                _context.next = 8;
-                break;
-              }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!isSingleSelectColDef(colDef) || !valueOptions)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            setOpen(false);
+            target = event.target; // NativeSelect casts the value to a string.
+            formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
+            if (!onValueChange) {
               _context.next = 8;
-              return onValueChange(event, formattedTargetValue);
-            case 8:
-              _context.next = 10;
-              return apiRef.current.setEditCellValue({
-                id: id,
-                field: field,
-                value: formattedTargetValue
-              }, event);
-            case 10:
-            case "end":
-              return _context.stop();
-          }
+              break;
+            }
+            _context.next = 8;
+            return onValueChange(event, formattedTargetValue);
+          case 8:
+            _context.next = 10;
+            return apiRef.current.setEditCellValue({
+              id: id,
+              field: field,
+              value: formattedTargetValue
+            }, event);
+          case 10:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));

package/legacy/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -15,7 +15,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (props) {
-  var _rootProps$slotProps;
+  var _rootProps$slotProps, _rootProps$slotProps2;
   var colDef = props.colDef,
     open = props.open,
     columnMenuId = props.columnMenuId,
@@ -34,22 +34,26 @@ export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (props) {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: iconButtonRef,
-      tabIndex: -1,
-      className: classes.button,
-      "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('columnMenuLabel'),
-      size: "small",
-      onClick: handleMenuIconClick,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
-      "aria-controls": columnMenuId,
-      id: columnMenuButtonId
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
-        fontSize: "small"
-      })
+      enterDelay: 1000
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: iconButtonRef,
+        tabIndex: -1,
+        className: classes.button,
+        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        size: "small",
+        onClick: handleMenuIconClick,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-haspopup": "true",
+        "aria-controls": columnMenuId,
+        id: columnMenuButtonId
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
     }))
   });
 });

package/legacy/components/columnHeaders/GridColumnHeaderTitle.js

@@ -45,16 +45,15 @@ var ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeader
 function GridColumnHeaderTitle(props) {
   var _rootProps$slotProps;
   var label = props.label,
-    description = props.description,
-    columnWidth = props.columnWidth;
+    description = props.description;
   var rootProps = useGridRootProps();
   var titleRef = React.useRef(null);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     tooltip = _React$useState2[0],
     setTooltip = _React$useState2[1];
-  React.useEffect(function () {
-    if (!description && titleRef && titleRef.current) {
+  var handleMouseOver = React.useCallback(function () {
+    if (!description && titleRef != null && titleRef.current) {
       var isOver = isOverflown(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -62,11 +61,12 @@ function GridColumnHeaderTitle(props) {
         setTooltip('');
       }
     }
-  }, [titleRef, columnWidth, description, label]);
+  }, [description, label]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: description || tooltip
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
       ref: titleRef,
       children: label
     })

package/legacy/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -19,8 +19,10 @@ function GridColumnHeaderMenu(_ref) {
   var hideMenu = React.useCallback(function (event) {
     // Prevent triggering the sorting
     event.stopPropagation();
-    apiRef.current.hideColumnMenu();
-  }, [apiRef]);
+    if (!(target != null && target.contains(event.target))) {
+      apiRef.current.hideColumnMenu();
+    }
+  }, [apiRef, target]);
   if (!target) {
     return null;
   }

package/legacy/components/menu/columnMenu/GridColumnMenu.js

@@ -1,21 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultComponents", "defaultComponentsProps", "components", "componentsProps"];
+var _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridColumnMenuComponents } from '../../../hooks/features/columnMenu/useGridColumnMenuComponents';
+import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
 import { GridColumnMenuContainer } from './GridColumnMenuContainer';
 import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
 import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
 import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var GRID_COLUMN_MENU_COMPONENTS = {
-  ColumnMenuSortItem: GridColumnMenuSortItem,
-  ColumnMenuFilterItem: GridColumnMenuFilterItem,
-  ColumnMenuColumnsItem: GridColumnMenuColumnsItem
+export var GRID_COLUMN_MENU_SLOTS = {
+  columnMenuSortItem: GridColumnMenuSortItem,
+  columnMenuFilterItem: GridColumnMenuFilterItem,
+  columnMenuColumnsItem: GridColumnMenuColumnsItem
 };
-export var GRID_COLUMN_MENU_COMPONENTS_PROPS = {
+export var GRID_COLUMN_MENU_SLOT_PROPS = {
   columnMenuSortItem: {
     displayOrder: 10
   },
@@ -27,33 +27,33 @@ export var GRID_COLUMN_MENU_COMPONENTS_PROPS = {
   }
 };
 var GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
-  var defaultComponents = props.defaultComponents,
-    defaultComponentsProps = props.defaultComponentsProps,
-    components = props.components,
-    componentsProps = props.componentsProps,
+  var defaultSlots = props.defaultSlots,
+    defaultSlotProps = props.defaultSlotProps,
+    slots = props.slots,
+    slotProps = props.slotProps,
     other = _objectWithoutProperties(props, _excluded);
-  var orderedComponents = useGridColumnMenuComponents(_extends({}, other, {
-    defaultComponents: defaultComponents,
-    defaultComponentsProps: defaultComponentsProps,
-    components: components,
-    componentsProps: componentsProps
+  var orderedSlots = useGridColumnMenuSlots(_extends({}, other, {
+    defaultSlots: defaultSlots,
+    defaultSlotProps: defaultSlotProps,
+    slots: slots,
+    slotProps: slotProps
   }));
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, other, {
-    children: orderedComponents.map(function (_ref, index) {
+    children: orderedSlots.map(function (_ref, index) {
       var _ref2 = _slicedToArray(_ref, 2),
         Component = _ref2[0],
-        componentProps = _ref2[1];
-      return /*#__PURE__*/_jsx(Component, _extends({}, componentProps), index);
+        otherProps = _ref2[1];
+      return /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index);
     })
   }));
 });
 var GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,
-    defaultComponents: GRID_COLUMN_MENU_COMPONENTS,
-    defaultComponentsProps: GRID_COLUMN_MENU_COMPONENTS_PROPS
+    defaultSlots: GRID_COLUMN_MENU_SLOTS,
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
@@ -62,20 +62,20 @@ process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
-  /**
-   * `components` could be used to add new and (or) override default column menu items
-   * If you register a nee component you must pass it's `displayOrder` in `componentsProps`
-   * or it will be placed in the end of the list
-   */
-  components: PropTypes.object,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
   /**
    * Could be used to pass new props or override props specific to a column menu component
    * e.g. `displayOrder`
    */
-  componentsProps: PropTypes.object,
-  hideMenu: PropTypes.func.isRequired,
-  id: PropTypes.string,
-  labelledby: PropTypes.string,
-  open: PropTypes.bool.isRequired
+  slotProps: PropTypes.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: PropTypes.object
 } : void 0;
 export { GridColumnMenu, GridGenericColumnMenu };

package/legacy/components/panel/GridColumnsPanel.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton"];
+var _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -84,6 +84,7 @@ function GridColumnsPanel(props) {
     disableHideAllButton = _props$disableHideAll === void 0 ? false : _props$disableHideAll,
     _props$disableShowAll = props.disableShowAllButton,
     disableShowAllButton = _props$disableShowAll === void 0 ? false : _props$disableShowAll,
+    getTogglableColumns = props.getTogglableColumns,
     other = _objectWithoutProperties(props, _excluded);
   var sortedColumns = React.useMemo(function () {
     switch (sort) {
@@ -123,14 +124,18 @@ function GridColumnsPanel(props) {
     setSearchValue(event.target.value);
   }, []);
   var currentColumns = React.useMemo(function () {
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    var togglableSortedColumns = togglableColumns ? sortedColumns.filter(function (_ref4) {
+      var field = _ref4.field;
+      return togglableColumns.includes(field);
+    }) : sortedColumns;
     if (!searchValue) {
-      return sortedColumns;
+      return togglableSortedColumns;
     }
-    var searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(function (column) {
-      return searchPredicate(column, searchValueToCheck);
+    return togglableSortedColumns.filter(function (column) {
+      return searchPredicate(column, searchValue.toLowerCase());
     });
-  }, [sortedColumns, searchValue, searchPredicate]);
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   var firstSwitchRef = React.useRef(null);
   React.useEffect(function () {
     if (autoFocusSearchField) {
@@ -215,6 +220,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   autoFocusSearchField: PropTypes.bool,
   disableHideAllButton: PropTypes.bool,
   disableShowAllButton: PropTypes.bool,
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns: PropTypes.func,
   searchPredicate: PropTypes.func,
   slotProps: PropTypes.object,
   sort: PropTypes.oneOf(['asc', 'desc'])

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -156,7 +156,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
           columnsSort: columnsSort
         }, filterFormProps), item.id == null ? index : item.id);
       })
-    }), !rootProps.disableMultipleColumnsFiltering && !disableAddFilterButton && !disableRemoveAllButton ? /*#__PURE__*/_jsxs(GridPanelFooter, {
+    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})

package/legacy/components/reexportable.js

@@ -1 +1 @@
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './menu/columnMenu/GridColumnMenu';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './menu/columnMenu/GridColumnMenu';

package/legacy/hooks/core/useGridApiInitialization.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
-import { unstable_resetCreateSelectorCache } from '../../utils/createSelector';
 var isSyntheticEvent = function isSyntheticEvent(event) {
   return event.isPropagationStopped !== undefined;
 };
@@ -40,7 +39,9 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!publicApiRef.current) {
     publicApiRef.current = {
       state: {},
-      instanceId: globalId
+      instanceId: {
+        id: globalId
+      }
     };
     globalId += 1;
   }
@@ -86,7 +87,6 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(function () {
     var api = privateApiRef.current;
     return function () {
-      unstable_resetCreateSelectorCache(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [privateApiRef]);