@mui/x-data-grid 6.0.4 → 6.2.0

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/modern/utils/utils.js

@@ -33,7 +33,7 @@ export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 /**
  * Based on `fast-deep-equal`
  *
- *  MIT License
+ * MIT License
  *
  * Copyright (c) 2017 Evgeny Poberezkin
  *

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/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -8,6 +8,7 @@ exports.GridFilterInputBoolean = GridFilterInputBoolean;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
@@ -23,6 +24,8 @@ function GridFilterInputBoolean(props) {
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const labelId = (0, _utils.unstable_useId)();
+  const selectId = (0, _utils.unstable_useId)();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -36,34 +39,39 @@ function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseTextField, (0, _extends2.default)({
-    // TODO: use baseSelect slot
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    select: true,
-    variant: "standard",
-    SelectProps: (0, _extends2.default)({
+  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
+      labelId: labelId,
+      id: selectId,
+      label: label,
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
       native: isSelectNative,
-      displayEmpty: true
-    }, rootProps.slotProps?.baseSelect),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "",
-      children: apiRef.current.getLocaleText('filterValueAny')
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "true",
-      children: apiRef.current.getLocaleText('filterValueTrue')
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "false",
-      children: apiRef.current.getLocaleText('filterValueFalse')
+      displayEmpty: true,
+      inputProps: {
+        ref: focusElementRef
+      }
+    }, others, baseSelectProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "",
+        children: apiRef.current.getLocaleText('filterValueAny')
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "true",
+        children: apiRef.current.getLocaleText('filterValueTrue')
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "false",
+        children: apiRef.current.getLocaleText('filterValueFalse')
+      }))]
     }))]
-  }));
+  });
 }

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

@@ -53,10 +53,9 @@ function GridFilterInputSingleSelect(props) {
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const id = (0, _utils.unstable_useId)();
+  const labelId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
-  const isSelectNative = baseSelectProps.native ?? true;
-  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
+  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? true;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -107,33 +106,37 @@ function GridFilterInputSingleSelect(props) {
   if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
-    // 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: (0, _extends2.default)({
+  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+      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.slotProps?.baseSelect)
-  }, others, rootProps.slotProps?.baseTextField, {
-    children: renderSingleSelectOptions({
-      column: resolvedColumn,
-      OptionComponent: rootProps.slots.baseSelectOption,
-      getOptionLabel,
-      getOptionValue,
-      isSelectNative,
-      baseSelectOptionProps
-    })
-  }));
+    }, others, rootProps.slotProps?.baseSelect, {
+      children: renderSingleSelectOptions({
+        column: resolvedColumn,
+        OptionComponent: rootProps.slots.baseSelectOption,
+        getOptionLabel,
+        getOptionValue,
+        isSelectNative,
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+      })
+    }))]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
   // ----------------------------- Warning --------------------------------

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/hooks/features/rowSelection/useGridRowSelection.js

@@ -68,8 +68,6 @@ const useGridRowSelection = (apiRef, props) => {
     checkboxSelection,
     disableMultipleRowSelection,
     disableRowSelectionOnClick,
-    pagination,
-    paginationMode,
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
@@ -385,33 +383,14 @@ const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, isRowSelectable, isStateControlled, props.rowSelection]);
   React.useEffect(() => {
-    if (!props.rowSelection) {
+    if (!props.rowSelection || isStateControlled) {
       return;
     }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
-      const {
-        rows: currentPageRows
-      } = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-        pagination,
-        paginationMode
-      });
-      const currentPageRowsLookup = currentPageRows.reduce((acc, {
-        id
-      }) => {
-        acc[id] = true;
-        return acc;
-      }, {});
-      const firstSelectableRow = currentSelection.find(id => {
-        let isSelectable = true;
-        if (isRowSelectable) {
-          isSelectable = isRowSelectable(id);
-        }
-        return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page
-      });
-
-      apiRef.current.setRowSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
+      // See https://github.com/mui/mui-x/issues/8455
+      apiRef.current.setRowSelectionModel([]);
     }
-  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleRowSelection, isRowSelectable, pagination, paginationMode, props.rowSelection]);
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
 };
 exports.useGridRowSelection = useGridRowSelection;