@mui/x-data-grid 6.0.3 → 6.1.0

package/node/components/GridRow.js

@@ -29,7 +29,7 @@ var _utils2 = require("../utils/utils");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason"];
+  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -56,7 +56,7 @@ function EmptyCell({
     width
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
+    className: `${_gridClasses.gridClasses.cell} ${_gridClasses.gridClasses.withBorderColor}`,
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
@@ -218,6 +218,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     if (editCellState != null && column.renderEditCell) {
       const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
       const params = (0, _extends2.default)({}, cellParams, {
         row: updatedRow

package/node/components/cell/GridCell.js

@@ -18,6 +18,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"];
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Based on https://stackoverflow.com/a/59518678

package/node/components/cell/GridEditDateCell.js

@@ -73,22 +73,25 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const hasUpdatedEditValueOnMount = React.useRef(false);
+  const parseValueToDate = React.useCallback(value => {
+    if (value === '') {
+      return null;
+    }
+    const [date, time] = value.split('T');
+    const [year, month, day] = date.split('-');
+    const parsedDate = new Date();
+    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    parsedDate.setHours(0, 0, 0, 0);
+    if (time) {
+      const [hours, minutes] = time.split(':');
+      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+    }
+    return parsedDate;
+  }, []);
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
-    let newParsedDate;
-    if (newFormattedDate === '') {
-      newParsedDate = null;
-    } else {
-      const [date, time] = newFormattedDate.split('T');
-      const [year, month, day] = date.split('-');
-      newParsedDate = new Date();
-      newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
-      newParsedDate.setHours(0, 0, 0, 0);
-      if (time) {
-        const [hours, minutes] = time.split(':');
-        newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
-      }
-    }
+    const newParsedDate = parseValueToDate(newFormattedDate);
     if (onValueChange) {
       await onValueChange(event, newParsedDate);
     }
@@ -101,7 +104,7 @@ function GridEditDateCell(props) {
       field,
       value: newParsedDate
     }, event);
-  }, [apiRef, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
       if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {
@@ -115,8 +118,26 @@ 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__*/(0, _jsxRuntime.jsx)(StyledInputBase, (0, _extends2.default)({
-    inputRef: inputRef,
+    inputRef: handleInputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -46,22 +46,26 @@ const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classes.root,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-      ref: iconButtonRef,
-      tabIndex: -1,
-      className: classes.button,
-      "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('columnMenuLabel'),
-      size: "small",
-      onClick: handleMenuIconClick,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
-      "aria-controls": columnMenuId,
-      id: columnMenuButtonId
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuIcon, {
-        fontSize: "small"
-      })
+      enterDelay: 1000
+    }, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        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.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
     }))
   });
 });

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -55,14 +55,13 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
 function GridColumnHeaderTitle(props) {
   const {
     label,
-    description,
-    columnWidth
+    description
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const titleRef = React.useRef(null);
   const [tooltip, setTooltip] = React.useState('');
-  React.useEffect(() => {
-    if (!description && titleRef && titleRef.current) {
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef?.current) {
       const isOver = (0, _domUtils.isOverflown)(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -70,11 +69,12 @@ function GridColumnHeaderTitle(props) {
         setTooltip('');
       }
     }
-  }, [titleRef, columnWidth, description, label]);
+  }, [description, label]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: description || tooltip
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
       ref: titleRef,
       children: label
     })

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

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

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

@@ -4,27 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridGenericColumnMenu = exports.GridColumnMenu = exports.GRID_COLUMN_MENU_COMPONENTS_PROPS = exports.GRID_COLUMN_MENU_COMPONENTS = void 0;
+exports.GridGenericColumnMenu = exports.GridColumnMenu = exports.GRID_COLUMN_MENU_SLOT_PROPS = exports.GRID_COLUMN_MENU_SLOTS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useGridColumnMenuComponents = require("../../../hooks/features/columnMenu/useGridColumnMenuComponents");
+var _useGridColumnMenuSlots = require("../../../hooks/features/columnMenu/useGridColumnMenuSlots");
 var _GridColumnMenuContainer = require("./GridColumnMenuContainer");
 var _GridColumnMenuColumnsItem = require("./menuItems/GridColumnMenuColumnsItem");
 var _GridColumnMenuFilterItem = require("./menuItems/GridColumnMenuFilterItem");
 var _GridColumnMenuSortItem = require("./menuItems/GridColumnMenuSortItem");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["defaultComponents", "defaultComponentsProps", "components", "componentsProps"];
+const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const GRID_COLUMN_MENU_COMPONENTS = {
-  ColumnMenuSortItem: _GridColumnMenuSortItem.GridColumnMenuSortItem,
-  ColumnMenuFilterItem: _GridColumnMenuFilterItem.GridColumnMenuFilterItem,
-  ColumnMenuColumnsItem: _GridColumnMenuColumnsItem.GridColumnMenuColumnsItem
+const GRID_COLUMN_MENU_SLOTS = {
+  columnMenuSortItem: _GridColumnMenuSortItem.GridColumnMenuSortItem,
+  columnMenuFilterItem: _GridColumnMenuFilterItem.GridColumnMenuFilterItem,
+  columnMenuColumnsItem: _GridColumnMenuColumnsItem.GridColumnMenuColumnsItem
 };
-exports.GRID_COLUMN_MENU_COMPONENTS = GRID_COLUMN_MENU_COMPONENTS;
-const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
+exports.GRID_COLUMN_MENU_SLOTS = GRID_COLUMN_MENU_SLOTS;
+const GRID_COLUMN_MENU_SLOT_PROPS = {
   columnMenuSortItem: {
     displayOrder: 10
   },
@@ -35,33 +35,33 @@ const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
     displayOrder: 30
   }
 };
-exports.GRID_COLUMN_MENU_COMPONENTS_PROPS = GRID_COLUMN_MENU_COMPONENTS_PROPS;
+exports.GRID_COLUMN_MENU_SLOT_PROPS = GRID_COLUMN_MENU_SLOT_PROPS;
 const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
   const {
-      defaultComponents,
-      defaultComponentsProps,
-      components,
-      componentsProps
+      defaultSlots,
+      defaultSlotProps,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const orderedComponents = (0, _useGridColumnMenuComponents.useGridColumnMenuComponents)((0, _extends2.default)({}, other, {
-    defaultComponents,
-    defaultComponentsProps,
-    components,
-    componentsProps
+  const orderedSlots = (0, _useGridColumnMenuSlots.useGridColumnMenuSlots)((0, _extends2.default)({}, other, {
+    defaultSlots,
+    defaultSlotProps,
+    slots,
+    slotProps
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({
     ref: ref
   }, other, {
-    children: orderedComponents.map(([Component, componentProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, componentProps), index))
+    children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
 exports.GridGenericColumnMenu = GridGenericColumnMenu;
 const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGenericColumnMenu, (0, _extends2.default)({}, 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
   }));
 });
 exports.GridColumnMenu = GridColumnMenu;
@@ -71,19 +71,19 @@ process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   colDef: _propTypes.default.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.default.object,
+  hideMenu: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string,
+  labelledby: _propTypes.default.string,
+  open: _propTypes.default.bool.isRequired,
   /**
    * Could be used to pass new props or override props specific to a column menu component
    * e.g. `displayOrder`
    */
-  componentsProps: _propTypes.default.object,
-  hideMenu: _propTypes.default.func.isRequired,
-  id: _propTypes.default.string,
-  labelledby: _propTypes.default.string,
-  open: _propTypes.default.bool.isRequired
+  slotProps: _propTypes.default.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.default.object
 } : void 0;

package/node/components/panel/GridColumnsPanel.js

@@ -25,7 +25,7 @@ var _envConstants = require("../../constants/envConstants");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton"];
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -79,7 +79,8 @@ function GridColumnsPanel(props) {
       searchPredicate = defaultSearchPredicate,
       autoFocusSearchField = true,
       disableHideAllButton = false,
-      disableShowAllButton = false
+      disableShowAllButton = false,
+      getTogglableColumns
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const sortedColumns = React.useMemo(() => {
@@ -117,12 +118,15 @@ function GridColumnsPanel(props) {
     setSearchValue(event.target.value);
   }, []);
   const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
     if (!searchValue) {
-      return sortedColumns;
+      return togglableSortedColumns;
     }
-    const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
-  }, [sortedColumns, searchValue, searchPredicate]);
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
     if (autoFocusSearchField) {
@@ -200,6 +204,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   autoFocusSearchField: _propTypes.default.bool,
   disableHideAllButton: _propTypes.default.bool,
   disableShowAllButton: _propTypes.default.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.default.func,
   searchPredicate: _propTypes.default.func,
   slotProps: _propTypes.default.object,
   sort: _propTypes.default.oneOf(['asc', 'desc'])

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

@@ -151,7 +151,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
         logicOperators: logicOperators,
         columnsSort: columnsSort
       }, filterFormProps), item.id == null ? index : item.id))
-    }), !rootProps.disableMultipleColumnsFiltering && !disableAddFilterButton && !disableRemoveAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
+    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelAddIcon, {})

package/node/components/reexportable.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "GRID_COLUMN_MENU_COMPONENTS", {
+Object.defineProperty(exports, "GRID_COLUMN_MENU_SLOTS", {
   enumerable: true,
   get: function () {
-    return _GridColumnMenu.GRID_COLUMN_MENU_COMPONENTS;
+    return _GridColumnMenu.GRID_COLUMN_MENU_SLOTS;
   }
 });
-Object.defineProperty(exports, "GRID_COLUMN_MENU_COMPONENTS_PROPS", {
+Object.defineProperty(exports, "GRID_COLUMN_MENU_SLOT_PROPS", {
   enumerable: true,
   get: function () {
-    return _GridColumnMenu.GRID_COLUMN_MENU_COMPONENTS_PROPS;
+    return _GridColumnMenu.GRID_COLUMN_MENU_SLOT_PROPS;
   }
 });
 Object.defineProperty(exports, "GridColumnMenu", {

package/node/hooks/core/useGridApiInitialization.js

@@ -8,7 +8,6 @@ var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 var _EventManager = require("../../utils/EventManager");
-var _createSelector = require("../../utils/createSelector");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const isSyntheticEvent = event => {
@@ -46,7 +45,9 @@ function useGridApiInitialization(inputApiRef, props) {
   if (!publicApiRef.current) {
     publicApiRef.current = {
       state: {},
-      instanceId: globalId
+      instanceId: {
+        id: globalId
+      }
     };
     globalId += 1;
   }
@@ -84,7 +85,6 @@ function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = privateApiRef.current;
     return () => {
-      (0, _createSelector.unstable_resetCreateSelectorCache)(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [privateApiRef]);

package/node/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridColumnMenuComponents = void 0;
+exports.useGridColumnMenuSlots = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -13,44 +13,39 @@ var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 const _excluded = ["displayOrder"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const camelize = pascalCase => {
-  const camelCase = pascalCase.split('');
-  camelCase[0] = camelCase[0].toLowerCase();
-  return camelCase.join('');
-};
-const useGridColumnMenuComponents = props => {
+const useGridColumnMenuSlots = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const {
-    defaultComponents,
-    defaultComponentsProps,
-    components = {},
-    componentsProps = {},
+    defaultSlots,
+    defaultSlotProps,
+    slots = {},
+    slotProps = {},
     hideMenu,
     colDef,
     addDividers = true
   } = props;
-  const processedComponents = React.useMemo(() => (0, _extends2.default)({}, defaultComponents, components), [defaultComponents, components]);
-  const processedComponentsProps = React.useMemo(() => {
-    if (!componentsProps || Object.keys(componentsProps).length === 0) {
-      return defaultComponentsProps;
+  const processedComponents = React.useMemo(() => (0, _extends2.default)({}, defaultSlots, slots), [defaultSlots, slots]);
+  const processedSlotProps = React.useMemo(() => {
+    if (!slotProps || Object.keys(slotProps).length === 0) {
+      return defaultSlotProps;
     }
-    const mergedProps = (0, _extends2.default)({}, componentsProps);
-    Object.entries(defaultComponentsProps).forEach(([key, currentComponentProps]) => {
-      mergedProps[key] = (0, _extends2.default)({}, currentComponentProps, componentsProps[key] || {});
+    const mergedProps = (0, _extends2.default)({}, slotProps);
+    Object.entries(defaultSlotProps).forEach(([key, currentSlotProps]) => {
+      mergedProps[key] = (0, _extends2.default)({}, currentSlotProps, slotProps[key] || {});
     });
     return mergedProps;
-  }, [defaultComponentsProps, componentsProps]);
+  }, [defaultSlotProps, slotProps]);
   const defaultItems = apiRef.current.unstable_applyPipeProcessors('columnMenu', [], props.colDef);
   const userItems = React.useMemo(() => {
-    const defaultComponentKeys = Object.keys(defaultComponents);
-    return Object.keys(components).filter(key => !defaultComponentKeys.includes(key));
-  }, [components, defaultComponents]);
+    const defaultComponentKeys = Object.keys(defaultSlots);
+    return Object.keys(slots).filter(key => !defaultComponentKeys.includes(key));
+  }, [slots, defaultSlots]);
   return React.useMemo(() => {
     const uniqueItems = Array.from(new Set([...defaultItems, ...userItems]));
     const cleansedItems = uniqueItems.filter(key => processedComponents[key] != null);
     const sorted = cleansedItems.sort((a, b) => {
-      const leftItemProps = processedComponentsProps[camelize(a)];
-      const rightItemProps = processedComponentsProps[camelize(b)];
+      const leftItemProps = processedSlotProps[a];
+      const rightItemProps = processedSlotProps[b];
       const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
       const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
       return leftDisplayOrder - rightDisplayOrder;
@@ -60,13 +55,13 @@ const useGridColumnMenuComponents = props => {
         colDef,
         onClick: hideMenu
       };
-      const processedComponentProps = processedComponentsProps[camelize(key)];
+      const processedComponentProps = processedSlotProps[key];
       if (processedComponentProps) {
         const customProps = (0, _objectWithoutPropertiesLoose2.default)(processedComponentProps, _excluded);
         itemProps = (0, _extends2.default)({}, itemProps, customProps);
       }
       return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [_Divider.default, {}]] : [...acc, [processedComponents[key], itemProps]];
     }, []);
-  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedComponentsProps, userItems]);
+  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems]);
 };
-exports.useGridColumnMenuComponents = useGridColumnMenuComponents;
+exports.useGridColumnMenuSlots = useGridColumnMenuSlots;

package/node/hooks/features/columns/useGridColumns.js

@@ -237,7 +237,7 @@ function useGridColumns(apiRef, props) {
     if (props.disableColumnSelector) {
       return columnMenuItems;
     }
-    return [...columnMenuItems, 'ColumnMenuColumnsItem'];
+    return [...columnMenuItems, 'columnMenuColumnsItem'];
   }, [props.disableColumnSelector]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItems);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);

package/node/hooks/features/editing/useGridCellEditing.js

@@ -251,13 +251,17 @@ 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
+      isProcessingProps: false,
+      unstable_updateValueOnRender
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);

package/node/hooks/features/editing/useGridEditing.js

@@ -120,9 +120,7 @@ const useGridEditing = (apiRef, props) => {
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    return {
-      changeReason: editingState[id][field].changeReason
-    };
+    return editingState[id][field];
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/node/hooks/features/editing/useGridRowEditing.js

@@ -319,13 +319,17 @@ 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
+        isProcessingProps: false,
+        unstable_updateValueOnRender
       };
       return acc;
     }, {});

package/node/hooks/features/filter/gridFilterState.js

@@ -11,4 +11,9 @@ const getDefaultGridFilterModel = () => ({
   quickFilterValues: [],
   quickFilterLogicOperator: _gridFilterItem.GridLogicOperator.And
 });
+
+/**
+ * @param {GridRowId} rowId The id of the row we want to filter.
+ * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
+ */
 exports.getDefaultGridFilterModel = getDefaultGridFilterModel;

package/node/hooks/features/filter/useGridFilter.js

@@ -67,7 +67,7 @@ const useGridFilter = (apiRef, props) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
     }
-    return [...columnMenuItems, 'ColumnMenuFilterItem'];
+    return [...columnMenuItems, 'columnMenuFilterItem'];
   }, [props.disableColumnFilter]);
 
   /**
@@ -121,6 +121,11 @@ const useGridFilter = (apiRef, props) => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
       const filterItemsWithValue = filterModel.items.filter(item => {
         if (item.value !== undefined) {
+          // Some filters like `isAnyOf` support array as `item.value`.
+          // If array is empty, we want to remove it from the filter model.
+          if (Array.isArray(item.value) && item.value.length === 0) {
+            return false;
+          }
           return true;
         }
         const column = apiRef.current.getColumn(item.field);

package/node/hooks/features/sorting/useGridSorting.js

@@ -80,7 +80,7 @@ const useGridSorting = (apiRef, props) => {
     }
     const sortingOrder = colDef.sortingOrder || props.sortingOrder;
     if (sortingOrder.some(item => !!item)) {
-      return [...columnMenuItems, 'ColumnMenuSortItem'];
+      return [...columnMenuItems, 'columnMenuSortItem'];
     }
     return columnMenuItems;
   }, [props.sortingOrder]);