@mui/x-data-grid 9.10.0 → 9.11.0

package/components/toolbarV8/ToolbarButton.mjs

@@ -2,15 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useRegisterToolbarButton } from '@mui/x-internals/ToolbarContext';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { useToolbarContext } from "./ToolbarContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button for performing actions from the toolbar.
@@ -26,59 +26,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const id = useId();
   const rootProps = useGridRootProps();
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = useToolbarContext();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
+  const _useRegisterToolbarBu = useRegisterToolbarButton(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = _objectWithoutPropertiesLoose(_useRegisterToolbarBu, _excluded2);
   const element = useComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {

package/hooks/features/columnResize/useGridColumnResize.js

@@ -450,6 +450,9 @@ const useGridColumnResize = (apiRef, props) => {
     const columnHeaderElement = (0, _domUtils.findParentElementFromClassName)(event.target, _gridClasses.gridClasses.columnHeader);
     const field = (0, _domUtils.getFieldFromHeaderElem)(columnHeaderElement);
     const colDef = apiRef.current.getColumn(field);
+    if (!colDef) {
+      return;
+    }
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field

package/hooks/features/columnResize/useGridColumnResize.mjs

@@ -442,6 +442,9 @@ export const useGridColumnResize = (apiRef, props) => {
     const columnHeaderElement = findParentElementFromClassName(event.target, gridClasses.columnHeader);
     const field = getFieldFromHeaderElem(columnHeaderElement);
     const colDef = apiRef.current.getColumn(field);
+    if (!colDef) {
+      return;
+    }
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field

package/hooks/features/columns/useGridColumns.js

@@ -137,6 +137,10 @@ function useGridColumns(apiRef, props) {
     return allColumns.findIndex(col => col === field);
   }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
+    const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return;
+    }
     const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const oldIndexPosition = getColumnIndexRelativeToVisibleColumns(field);
     if (oldIndexPosition === targetIndexPosition) {
@@ -150,7 +154,7 @@ function useGridColumns(apiRef, props) {
       orderedFields: updatedColumns
     }));
     const params = {
-      column: apiRef.current.getColumn(field),
+      column,
       targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(field),
       oldIndex: oldIndexPosition
     };

package/hooks/features/columns/useGridColumns.mjs

@@ -128,6 +128,10 @@ export function useGridColumns(apiRef, props) {
     return allColumns.findIndex(col => col === field);
   }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
+    const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return;
+    }
     const allColumns = gridColumnFieldsSelector(apiRef);
     const oldIndexPosition = getColumnIndexRelativeToVisibleColumns(field);
     if (oldIndexPosition === targetIndexPosition) {
@@ -141,7 +145,7 @@ export function useGridColumns(apiRef, props) {
       orderedFields: updatedColumns
     }));
     const params = {
-      column: apiRef.current.getColumn(field),
+      column,
       targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(field),
       oldIndex: oldIndexPosition
     };

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -47,6 +47,11 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  // `false` while a request is in flight, and for any request that errors or is discarded as
+  // stale. Lets the mount effect tell "rows are already displayed" from "the fetch never landed".
+  const rowsAreUpToDate = React.useRef(false);
+  // Requests that are still running and will apply their response when they settle.
+  const pendingRequestCount = React.useRef(0);
   const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
   const revalidateMs = props.dataSourceRevalidateMs;
@@ -91,6 +96,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      rowsAreUpToDate.current = true;
       if (standardRowsUpdateStrategyActive) {
         apiRef.current.setLoading(false);
       }
@@ -103,6 +109,8 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     const requestId = lastRequestId.current + 1;
     lastRequestId.current = requestId;
+    rowsAreUpToDate.current = false;
+    pendingRequestCount.current += 1;
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
@@ -116,6 +124,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             keepChildrenExpanded
           }
         });
+        rowsAreUpToDate.current = true;
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
@@ -138,6 +147,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
         }
       }
     } finally {
+      pendingRequestCount.current -= 1;
       if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
@@ -313,12 +323,34 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [revalidateMs, stopPolling]);
   React.useEffect(() => stopPolling, [stopPolling]);
+  const lastApiRef = React.useRef(apiRef);
+  const lastStrategy = React.useRef(currentStrategy);
+  const lastDataSource = React.useRef(props.dataSource);
   React.useEffect(() => {
+    // `<Activity mode="hidden">` leaves the root element in the document, a real unmount does not.
+    // Only discard the in-flight response in the latter case, so hiding lets the request land.
+    const rootElement = apiRef.current?.rootElementRef?.current ?? null;
+    const ignoreInFlightRequest = () => {
+      if (!rootElement?.isConnected) {
+        lastRequestId.current += 1;
+      }
+    };
+
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
     if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
+    const dependenciesChanged = lastApiRef.current !== apiRef || lastStrategy.current !== currentStrategy || lastDataSource.current !== props.dataSource;
+    lastApiRef.current = apiRef;
+    lastStrategy.current = currentStrategy;
+    lastDataSource.current = props.dataSource;
+
+    // Re-mounting the effect (`<Activity />` becoming visible again, for instance) must not
+    // re-fetch data that is already displayed.
+    if (!dependenciesChanged && (rowsAreUpToDate.current || pendingRequestCount.current > 0)) {
+      return ignoreInFlightRequest;
+    }
     if (props.dataSource) {
       stopPolling();
       // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
@@ -332,10 +364,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
-    return () => {
-      // ignore the current request on unmount
-      lastRequestId.current += 1;
-    };
+    return ignoreInFlightRequest;
   }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
   React.useEffect(() => {
     // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -40,6 +40,11 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  // `false` while a request is in flight, and for any request that errors or is discarded as
+  // stale. Lets the mount effect tell "rows are already displayed" from "the fetch never landed".
+  const rowsAreUpToDate = React.useRef(false);
+  // Requests that are still running and will apply their response when they settle.
+  const pendingRequestCount = React.useRef(0);
   const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
   const revalidateMs = props.dataSourceRevalidateMs;
@@ -84,6 +89,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      rowsAreUpToDate.current = true;
       if (standardRowsUpdateStrategyActive) {
         apiRef.current.setLoading(false);
       }
@@ -96,6 +102,8 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     const requestId = lastRequestId.current + 1;
     lastRequestId.current = requestId;
+    rowsAreUpToDate.current = false;
+    pendingRequestCount.current += 1;
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
@@ -109,6 +117,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             keepChildrenExpanded
           }
         });
+        rowsAreUpToDate.current = true;
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
@@ -131,6 +140,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
         }
       }
     } finally {
+      pendingRequestCount.current -= 1;
       if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
@@ -306,12 +316,34 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [revalidateMs, stopPolling]);
   React.useEffect(() => stopPolling, [stopPolling]);
+  const lastApiRef = React.useRef(apiRef);
+  const lastStrategy = React.useRef(currentStrategy);
+  const lastDataSource = React.useRef(props.dataSource);
   React.useEffect(() => {
+    // `<Activity mode="hidden">` leaves the root element in the document, a real unmount does not.
+    // Only discard the in-flight response in the latter case, so hiding lets the request land.
+    const rootElement = apiRef.current?.rootElementRef?.current ?? null;
+    const ignoreInFlightRequest = () => {
+      if (!rootElement?.isConnected) {
+        lastRequestId.current += 1;
+      }
+    };
+
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
     if (currentStrategy !== DataSourceRowsUpdateStrategy.Default && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
+    const dependenciesChanged = lastApiRef.current !== apiRef || lastStrategy.current !== currentStrategy || lastDataSource.current !== props.dataSource;
+    lastApiRef.current = apiRef;
+    lastStrategy.current = currentStrategy;
+    lastDataSource.current = props.dataSource;
+
+    // Re-mounting the effect (`<Activity />` becoming visible again, for instance) must not
+    // re-fetch data that is already displayed.
+    if (!dependenciesChanged && (rowsAreUpToDate.current || pendingRequestCount.current > 0)) {
+      return ignoreInFlightRequest;
+    }
     if (props.dataSource) {
       stopPolling();
       // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
@@ -325,10 +357,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
-    return () => {
-      // ignore the current request on unmount
-      lastRequestId.current += 1;
-    };
+    return ignoreInFlightRequest;
   }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
   React.useEffect(() => {
     // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those

package/hooks/features/editing/useGridCellEditing.js

@@ -260,14 +260,17 @@ const useGridCellEditing = (apiRef, props) => {
       deleteValue,
       initialValue
     } = params;
+    const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return;
+    }
     const value = apiRef.current.getCellValue(id, field);
     let newValue = value;
     if (deleteValue) {
-      newValue = (0, _utils2.getDefaultCellValue)(apiRef.current.getColumn(field));
+      newValue = (0, _utils2.getDefaultCellValue)(column);
     } else if (initialValue) {
       newValue = initialValue;
     }
-    const column = apiRef.current.getColumn(field);
     const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
     let newProps = {
       value: newValue,
@@ -410,6 +413,9 @@ const useGridCellEditing = (apiRef, props) => {
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, _gridEditRowModel.GridCellModes.Edit);
     const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return false;
+    }
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
@@ -461,7 +467,7 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       value
     } = editingState[id][field];
-    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : (0, _extends2.default)({}, row, {
+    return column?.valueSetter ? column.valueSetter(value, row, column, apiRef) : (0, _extends2.default)({}, row, {
       [field]: value
     });
   }, [apiRef]);

package/hooks/features/editing/useGridCellEditing.mjs

@@ -253,14 +253,17 @@ export const useGridCellEditing = (apiRef, props) => {
       deleteValue,
       initialValue
     } = params;
+    const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return;
+    }
     const value = apiRef.current.getCellValue(id, field);
     let newValue = value;
     if (deleteValue) {
-      newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+      newValue = getDefaultCellValue(column);
     } else if (initialValue) {
       newValue = initialValue;
     }
-    const column = apiRef.current.getColumn(field);
     const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
     let newProps = {
       value: newValue,
@@ -403,6 +406,9 @@ export const useGridCellEditing = (apiRef, props) => {
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, GridCellModes.Edit);
     const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return false;
+    }
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
@@ -454,7 +460,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       value
     } = editingState[id][field];
-    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, {
+    return column?.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, {
       [field]: value
     });
   }, [apiRef]);

package/hooks/features/editing/useGridRowEditing.js

@@ -135,7 +135,7 @@ const useGridRowEditing = (apiRef, props) => {
       } else if (event.key === 'Tab') {
         const columnFields = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef).filter(field => {
           const column = apiRef.current.getColumn(field);
-          if (column.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
+          if (column?.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
             return true;
           }
           return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
@@ -340,11 +340,10 @@ const useGridRowEditing = (apiRef, props) => {
       if (!cellParams.isEditable) {
         return acc;
       }
-      const column = apiRef.current.getColumn(field);
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = (0, _utils2.getDefaultCellValue)(column);
+          newValue = (0, _utils2.getDefaultCellValue)(col);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -352,7 +351,7 @@ const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: column.editable && !!column.preProcessEditCellProps && deleteValue
+        isProcessingProps: col.editable && !!col.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -503,6 +502,9 @@ const useGridRowEditing = (apiRef, props) => {
     } = params;
     throwIfNotEditable(id, field);
     const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return Promise.resolve(false);
+    }
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
@@ -556,7 +558,7 @@ const useGridRowEditing = (apiRef, props) => {
           return;
         }
         const fieldColumn = apiRef.current.getColumn(thisField);
-        if (!fieldColumn.preProcessEditCellProps) {
+        if (!fieldColumn?.preProcessEditCellProps) {
           return;
         }
         fieldProps = (0, _extends2.default)({}, fieldProps, {

package/hooks/features/editing/useGridRowEditing.mjs

@@ -128,7 +128,7 @@ export const useGridRowEditing = (apiRef, props) => {
       } else if (event.key === 'Tab') {
         const columnFields = gridVisibleColumnFieldsSelector(apiRef).filter(field => {
           const column = apiRef.current.getColumn(field);
-          if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+          if (column?.type === GRID_ACTIONS_COLUMN_TYPE) {
             return true;
           }
           return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
@@ -333,11 +333,10 @@ export const useGridRowEditing = (apiRef, props) => {
       if (!cellParams.isEditable) {
         return acc;
       }
-      const column = apiRef.current.getColumn(field);
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = getDefaultCellValue(column);
+          newValue = getDefaultCellValue(col);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -345,7 +344,7 @@ export const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: column.editable && !!column.preProcessEditCellProps && deleteValue
+        isProcessingProps: col.editable && !!col.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -496,6 +495,9 @@ export const useGridRowEditing = (apiRef, props) => {
     } = params;
     throwIfNotEditable(id, field);
     const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return Promise.resolve(false);
+    }
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
@@ -549,7 +551,7 @@ export const useGridRowEditing = (apiRef, props) => {
           return;
         }
         const fieldColumn = apiRef.current.getColumn(thisField);
-        if (!fieldColumn.preProcessEditCellProps) {
+        if (!fieldColumn?.preProcessEditCellProps) {
           return;
         }
         fieldProps = _extends({}, fieldProps, {

package/hooks/features/filter/useGridFilter.js

@@ -113,7 +113,7 @@ const useGridFilter = (apiRef, props, configuration) => {
           return true;
         }
         const column = apiRef.current.getColumn(item.field);
-        const filterOperator = column.filterOperators?.find(operator => operator.value === item.operator);
+        const filterOperator = column?.filterOperators?.find(operator => operator.value === item.operator);
         const requiresFilterValue = typeof filterOperator?.requiresFilterValue === 'undefined' ? true : filterOperator?.requiresFilterValue;
 
         // Operators like `isEmpty` don't have and don't require `item.value`.

package/hooks/features/filter/useGridFilter.mjs

@@ -104,7 +104,7 @@ export const useGridFilter = (apiRef, props, configuration) => {
           return true;
         }
         const column = apiRef.current.getColumn(item.field);
-        const filterOperator = column.filterOperators?.find(operator => operator.value === item.operator);
+        const filterOperator = column?.filterOperators?.find(operator => operator.value === item.operator);
         const requiresFilterValue = typeof filterOperator?.requiresFilterValue === 'undefined' ? true : filterOperator?.requiresFilterValue;
 
         // Operators like `isEmpty` don't have and don't require `item.value`.

package/hooks/features/rows/gridRowsUtils.js

@@ -261,7 +261,23 @@ const updateCacheWithNewRows = ({
       }
 
       // Update the data row lookups.
-      dataRowIdToModelLookup[id] = (0, _extends2.default)({}, oldRow, partialRow);
+      // Prototype-preservation rules:
+      //   1. If partialRow is a class instance (non-plain object), use its prototype — the
+      //      caller is passing in a fully-constructed instance and owns the prototype chain.
+      //   2. If partialRow is a plain object (Object.prototype), prefer oldRow's prototype so
+      //      that a partial-update object does not silently discard the existing row's class.
+      //   3. If both are plain objects the result is also a plain object (no-op).
+      //
+      // Note: private class fields (#field syntax) cannot be preserved through a spread-style
+      // merge because the brand check is tied to the original instance. Rows that rely on
+      // private fields must supply a fully-constructed instance as partialRow (rule 1 above)
+      // rather than a plain-object partial update.
+      const partialRowProto = Object.getPrototypeOf(partialRow);
+      const isPartialRowPlain = partialRowProto === Object.prototype || partialRowProto === null;
+      const proto = isPartialRowPlain ? Object.getPrototypeOf(oldRow) : partialRowProto;
+      const merged = Object.create(proto);
+      Object.assign(merged, oldRow, partialRow);
+      dataRowIdToModelLookup[id] = merged;
       return;
     }
 

package/hooks/features/rows/gridRowsUtils.mjs

@@ -242,7 +242,23 @@ export const updateCacheWithNewRows = ({
       }
 
       // Update the data row lookups.
-      dataRowIdToModelLookup[id] = _extends({}, oldRow, partialRow);
+      // Prototype-preservation rules:
+      //   1. If partialRow is a class instance (non-plain object), use its prototype — the
+      //      caller is passing in a fully-constructed instance and owns the prototype chain.
+      //   2. If partialRow is a plain object (Object.prototype), prefer oldRow's prototype so
+      //      that a partial-update object does not silently discard the existing row's class.
+      //   3. If both are plain objects the result is also a plain object (no-op).
+      //
+      // Note: private class fields (#field syntax) cannot be preserved through a spread-style
+      // merge because the brand check is tied to the original instance. Rows that rely on
+      // private fields must supply a fully-constructed instance as partialRow (rule 1 above)
+      // rather than a plain-object partial update.
+      const partialRowProto = Object.getPrototypeOf(partialRow);
+      const isPartialRowPlain = partialRowProto === Object.prototype || partialRowProto === null;
+      const proto = isPartialRowPlain ? Object.getPrototypeOf(oldRow) : partialRowProto;
+      const merged = Object.create(proto);
+      Object.assign(merged, oldRow, partialRow);
+      dataRowIdToModelLookup[id] = merged;
       return;
     }
 

package/hooks/features/rows/useGridParamsApi.d.mts

@@ -1,7 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
-import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
 import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
 /**
  * @requires useGridColumns (method)
  * @requires useGridRows (method)

package/hooks/features/rows/useGridParamsApi.d.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
-import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 /**
  * @requires useGridColumns (method)
  * @requires useGridRows (method)

package/hooks/features/rows/useGridParamsApi.js

@@ -76,6 +76,7 @@ function useGridParamsApi(apiRef, props, configuration) {
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
     const cellMode = apiRef.current.getCellMode(id, field);
     return apiRef.current.getCellParamsForRow(id, field, row, {
+      // Params keep a non-nullable `colDef`, but it can be `undefined` at runtime for an unknown field.
       colDef: props.listView && props.listViewColumn?.field === field ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef) : apiRef.current.getColumn(field),
       rowNode,
       hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,

package/hooks/features/rows/useGridParamsApi.mjs

@@ -69,6 +69,7 @@ export function useGridParamsApi(apiRef, props, configuration) {
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
     const cellMode = apiRef.current.getCellMode(id, field);
     return apiRef.current.getCellParamsForRow(id, field, row, {
+      // Params keep a non-nullable `colDef`, but it can be `undefined` at runtime for an unknown field.
       colDef: props.listView && props.listViewColumn?.field === field ? gridListColumnSelector(apiRef) : apiRef.current.getColumn(field),
       rowNode,
       hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,

package/hooks/features/sorting/useGridSorting.js

@@ -120,6 +120,9 @@ const useGridSorting = (apiRef, props) => {
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
   const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
     const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return;
+    }
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {

package/hooks/features/sorting/useGridSorting.mjs

@@ -111,6 +111,9 @@ export const useGridSorting = (apiRef, props) => {
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
   const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
     const column = apiRef.current.getColumn(field);
+    if (!column) {
+      return;
+    }
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {

package/index.js

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

package/index.mjs

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