@mui/x-data-grid 6.0.4 → 6.1.0

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

@@ -4,4 +4,9 @@ export const getDefaultGridFilterModel = () => ({
   logicOperator: GridLogicOperator.And,
   quickFilterValues: [],
   quickFilterLogicOperator: 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.
+ */

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

@@ -111,6 +111,11 @@ export const useGridFilter = (apiRef, props) => {
       const filterModel = 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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.4
+ * @mui/x-data-grid v6.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -28,4 +28,12 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } f
  * The full grid API.
  * @demos
  *   - [API object](/x/react-data-grid/api-object/)
+ */
+
+/**
+ * The state of `DataGrid`.
+ */
+
+/**
+ * The initial state of `DataGrid`.
  */

package/modern/locales/coreLocales.js

@@ -3,7 +3,6 @@
 // This allows not to bump the minimal version of `@mui/material` in peerDependencies which results
 // in broader compatibility between the packages.
 // See https://github.com/mui/mui-x/pull/7646#issuecomment-1404605556 for additional context.
-
 export const beBYCore = {
   components: {
     MuiTablePagination: {

package/modern/locales/huHU.js

@@ -20,17 +20,15 @@ const huHUGrid = {
   toolbarFiltersTooltipShow: 'Szűrők megjelenítése',
   toolbarFiltersTooltipActive: count => `${count} aktív szűrő`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
-
+  toolbarQuickFilterPlaceholder: 'Keresés…',
+  toolbarQuickFilterLabel: 'Keresés',
+  toolbarQuickFilterDeleteIconLabel: 'Törlés',
   // Export selector toolbar button text
   toolbarExport: 'Exportálás',
   toolbarExportLabel: 'Exportálás',
   toolbarExportCSV: 'Mentés CSV fájlként',
   toolbarExportPrint: 'Nyomtatás',
-  // toolbarExportExcel: 'Download as Excel',
-
+  toolbarExportExcel: 'Mentés Excel fájlként',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Oszlop keresése',
   columnsPanelTextFieldPlaceholder: 'Oszlop neve',
@@ -39,7 +37,7 @@ const huHUGrid = {
   columnsPanelHideAllButton: 'Összes elrejtése',
   // Filter panel text
   filterPanelAddFilter: 'Szűrő hozzáadása',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Összes törlése',
   filterPanelDeleteIconLabel: 'Törlés',
   filterPanelLogicOperator: 'Logikai operátor',
   filterPanelOperator: 'Operátorok',
@@ -69,7 +67,7 @@ const huHUGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Oszlopok megjelenítése',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Oszlopok kezelése',
   columnMenuFilter: 'Szűrők',
   columnMenuHideColumn: 'Elrejtés',
   columnMenuUnsort: 'Sorrend visszaállítása',
@@ -109,20 +107,17 @@ const huHUGrid = {
   groupColumn: name => `Csoportosítás ${name} szerint`,
   unGroupColumn: name => `${name} szerinti csoportosítás törlése`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Részletek panel váltása',
   expandDetailPanel: 'Kibontás',
-  collapseDetailPanel: 'Összecsukás'
-
+  collapseDetailPanel: 'Összecsukás',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'Sorok újrarendezése',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Összesítés',
+  aggregationFunctionLabelSum: 'Összeg',
+  aggregationFunctionLabelAvg: 'Átlag',
+  aggregationFunctionLabelMin: 'Minimum',
+  aggregationFunctionLabelMax: 'Maximum',
+  aggregationFunctionLabelSize: 'Darabszám'
 };
-
 export const huHU = getGridLocalization(huHUGrid, huHUCore);

package/modern/locales/jaJP.js

@@ -37,7 +37,7 @@ const jaJPGrid = {
   columnsPanelHideAllButton: 'すべて非表示',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'すべて削除',
   filterPanelDeleteIconLabel: '削除',
   filterPanelLogicOperator: '論理演算子',
   filterPanelOperator: '演算子',

package/modern/locales/nlNL.js

@@ -37,7 +37,7 @@ const nlNLGrid = {
   columnsPanelHideAllButton: 'Alles verbergen',
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Alles verwijderen',
   filterPanelDeleteIconLabel: 'Verwijderen',
   filterPanelLogicOperator: 'Logische operator',
   filterPanelOperator: 'Operatoren',
@@ -67,7 +67,7 @@ const nlNLGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Toon kolommen',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Kolommen beheren',
   columnMenuFilter: 'Filteren',
   columnMenuHideColumn: 'Verbergen',
   columnMenuUnsort: 'Annuleer sortering',
@@ -107,7 +107,7 @@ const nlNLGrid = {
   groupColumn: name => `Groepeer op ${name}`,
   unGroupColumn: name => `Stop groeperen op ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Detailmenu in- of uitklappen',
   expandDetailPanel: 'Uitklappen',
   collapseDetailPanel: 'Inklappen',
   // Row reordering text

package/modern/locales/ptBR.js

@@ -111,15 +111,13 @@ const ptBRGrid = {
   expandDetailPanel: 'Expandir',
   collapseDetailPanel: 'Esconder',
   // Row reordering text
-  rowReorderingHeaderName: 'Reorganizar linhas'
-
+  rowReorderingHeaderName: 'Reorganizar linhas',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agrupar',
+  aggregationFunctionLabelSum: 'soma',
+  aggregationFunctionLabelAvg: 'média',
+  aggregationFunctionLabelMin: 'mín',
+  aggregationFunctionLabelMax: 'máx',
+  aggregationFunctionLabelSize: 'tamanho'
 };
-
 export const ptBR = getGridLocalization(ptBRGrid, ptBRCore);

package/modern/locales/ruRU.js

@@ -76,7 +76,7 @@ const ruRUGrid = {
   // Column menu text
   columnMenuLabel: 'Меню',
   columnMenuShowColumns: 'Показать столбцы',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Управление колонками',
   columnMenuFilter: 'Фильтр',
   columnMenuHideColumn: 'Скрыть',
   columnMenuUnsort: 'Отменить сортировку',

package/modern/models/gridColumnGrouping.js

@@ -4,4 +4,8 @@ export function isLeaf(node) {
 
 /**
  * A function used to process headerClassName params.
+ */
+
+/**
+ * The union type representing the [[GridColDef]] column header class type.
  */

package/modern/models/params/gridRowParams.js

@@ -32,5 +32,13 @@ var GridRowEditStopReasons = /*#__PURE__*/function (GridRowEditStopReasons) {
   GridRowEditStopReasons["shiftTabKeyDown"] = "shiftTabKeyDown";
   return GridRowEditStopReasons;
 }(GridRowEditStopReasons || {});
+/**
+ * Object passed as parameter in the row `getRowSpacing` callback prop.
+ * @demos
+ *   - [Row spacing](/x/react-data-grid/row-height/#row-spacing)
+ */
+/**
+ * The getRowSpacing return value.
+ */
 // https://github.com/mui/mui-x/pull/3738#discussion_r798504277
 export { GridRowEditStartReasons, GridRowEditStopReasons };

package/modern/utils/createSelector.js

@@ -1,39 +1,35 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
 const cacheContainer = {
-  cache: null
+  cache: new WeakMap()
 };
 const missingInstanceIdWarning = buildWarning(['MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g `mySelector(state, apiRef.current.instanceId)`.']);
 export const createSelector = (...args) => {
-  if (cacheContainer.cache === null) {
-    cacheContainer.cache = {};
-  }
   const selector = (...selectorArgs) => {
     const [stateOrApiRef, instanceId] = selectorArgs;
     const isApiRef = !!stateOrApiRef.current;
-    const cacheKey = isApiRef ? stateOrApiRef.current.instanceId : instanceId ?? 'default';
+    const cacheKey = isApiRef ? stateOrApiRef.current.instanceId : instanceId ?? {
+      id: 'default'
+    };
     const state = isApiRef ? stateOrApiRef.current.state : stateOrApiRef;
     if (process.env.NODE_ENV !== 'production') {
-      if (cacheKey === 'default') {
+      if (cacheKey.id === 'default') {
         missingInstanceIdWarning();
       }
     }
-    if (cacheContainer.cache === null) {
-      cacheContainer.cache = {};
-    }
     const {
       cache
     } = cacheContainer;
-    if (cache[cacheKey] && cache[cacheKey].get(args)) {
+    if (cache.get(cacheKey) && cache.get(cacheKey)?.get(args)) {
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
-      return cache[cacheKey].get(args)(state, cacheKey);
+      return cache.get(cacheKey)?.get(args)(state, cacheKey);
     }
     const newSelector = reselectCreateSelector(...args);
-    if (!cache[cacheKey]) {
-      cache[cacheKey] = new Map();
+    if (!cache.get(cacheKey)) {
+      cache.set(cacheKey, new Map());
     }
-    cache[cacheKey].set(args, newSelector);
+    cache.get(cacheKey)?.set(args, newSelector);
     return newSelector(state, cacheKey);
   };
 
@@ -44,12 +40,6 @@ export const createSelector = (...args) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCreateSelectorCache = cacheKey => {
-  if (typeof cacheKey !== 'undefined') {
-    if (cacheContainer.cache && cacheContainer.cache[cacheKey]) {
-      delete cacheContainer.cache[cacheKey];
-    }
-  } else {
-    cacheContainer.cache = null;
-  }
+export const unstable_resetCreateSelectorCache = () => {
+  cacheContainer.cache = new WeakMap();
 };

package/node/components/GridAutoSizer.js

@@ -12,7 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _createDetectElementResize = _interopRequireDefault(require("../lib/createDetectElementResize"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
+const _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"]; // TODO replace with https://caniuse.com/resizeobserver.
+// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
+// for the sources.
 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 GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {

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 => {
@@ -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/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/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/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

@@ -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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.4
+ * @mui/x-data-grid v6.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the