@mui/x-data-grid 6.0.4 → 6.2.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/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/GridFilterInputBoolean.js

@@ -3,11 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridFilterInputBoolean(props) {
-  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   var item = props.item,
     applyValue = props.applyValue,
     apiRef = props.apiRef,
@@ -18,6 +19,8 @@ export function GridFilterInputBoolean(props) {
     filterValueState = _React$useState2[0],
     setFilterValueState = _React$useState2[1];
   var rootProps = useGridRootProps();
+  var labelId = useId();
+  var selectId = useId();
   var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
@@ -31,34 +34,39 @@ export function GridFilterInputBoolean(props) {
   React.useEffect(function () {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseTextField, _extends({
-    // TODO: use baseSelect slot
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    select: true,
-    variant: "standard",
-    SelectProps: _extends({
+  var label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+      labelId: labelId,
+      id: selectId,
+      label: label,
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
       native: isSelectNative,
-      displayEmpty: true
-    }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseTextField, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "",
-      children: apiRef.current.getLocaleText('filterValueAny')
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "true",
-      children: apiRef.current.getLocaleText('filterValueTrue')
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "false",
-      children: apiRef.current.getLocaleText('filterValueFalse')
+      displayEmpty: true,
+      inputProps: {
+        ref: focusElementRef
+      }
+    }, others, baseSelectProps, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "",
+        children: apiRef.current.getLocaleText('filterValueAny')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "true",
+        children: apiRef.current.getLocaleText('filterValueTrue')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "false",
+        children: apiRef.current.getLocaleText('filterValueFalse')
+      }))]
     }))]
-  }));
+  });
 }

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

@@ -10,6 +10,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
   var _ref$column = _ref.column,
     valueOptions = _ref$column.valueOptions,
@@ -33,7 +34,7 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
   });
 };
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
     applyValue = props.applyValue,
     type = props.type,
@@ -47,10 +48,9 @@ function GridFilterInputSingleSelect(props) {
     filterValueState = _React$useState2[0],
     setFilterValueState = _React$useState2[1];
   var id = useId();
+  var labelId = useId();
   var rootProps = useGridRootProps();
-  var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
-  var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
+  var isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : (_rootProps$slotProps$2 = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps$2.native) != null ? _rootProps$slotProps$ : true;
   var resolvedColumn = null;
   if (item.field) {
     var column = apiRef.current.getColumn(item.field);
@@ -102,33 +102,37 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-    // TODO: use baseSelect slot
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: "standard",
-    type: type || 'text',
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef,
-    select: true,
-    SelectProps: _extends({
+  var label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+      id: id,
+      label: label,
+      labelId: labelId,
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
+      type: type || 'text',
+      inputProps: {
+        ref: focusElementRef,
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+      },
       native: isSelectNative
-    }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect)
-  }, others, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseTextField, {
-    children: renderSingleSelectOptions({
-      column: resolvedColumn,
-      OptionComponent: rootProps.slots.baseSelectOption,
-      getOptionLabel: getOptionLabel,
-      getOptionValue: getOptionValue,
-      isSelectNative: isSelectNative,
-      baseSelectOptionProps: baseSelectOptionProps
-    })
-  }));
+    }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+      children: renderSingleSelectOptions({
+        column: resolvedColumn,
+        OptionComponent: rootProps.slots.baseSelectOption,
+        getOptionLabel: getOptionLabel,
+        getOptionValue: getOptionValue,
+        isSelectNative: isSelectNative,
+        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+      })
+    }))]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
   // ----------------------------- Warning --------------------------------

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]);

package/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -183,7 +183,7 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
     return !orderedFieldsLookup[field];
   })));
   var newColumnLookup = _extends({}, columnsState.lookup);
-  var _loop = function _loop(_i) {
+  var _loop = function _loop() {
     var field = columnsWithUpdatedDimensions[_i];
     var newColDef = _extends({}, newColumnLookup[field], {
       hasBeenResized: true
@@ -197,7 +197,7 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
     newColumnLookup[field] = newColDef;
   };
   for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
-    _loop(_i);
+    _loop();
   }
   var newColumnsState = _extends({}, columnsState, {
     orderedFields: newOrderedFields,