@mui/x-data-grid 6.11.1 → 6.12.0

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -4,9 +4,9 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "t
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
+import { useTimeout } from '../../../hooks/utils/useTimeout';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SUBMIT_FILTER_STROKE_TIME = 500;
 function GridFilterInputValue(props) {
   var _item$value, _rootProps$slotProps;
   const {
@@ -21,7 +21,7 @@ function GridFilterInputValue(props) {
       InputProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  const filterTimeout = React.useRef();
+  const filterTimeout = useTimeout();
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
@@ -30,26 +30,24 @@ function GridFilterInputValue(props) {
     const {
       value
     } = event.target;
-    clearTimeout(filterTimeout.current);
     setFilterValueState(String(value));
     setIsApplying(true);
-    filterTimeout.current = setTimeout(() => {
-      applyValue(_extends({}, item, {
-        value
-      }));
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const newItem = _extends({}, item, {
+        value,
+        fromInput: id
+      });
+      applyValue(newItem);
       setIsApplying(false);
-    }, SUBMIT_FILTER_STROKE_TIME);
-  }, [applyValue, item]);
+    });
+  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
-    return () => {
-      clearTimeout(filterTimeout.current);
-    };
-  }, []);
-  React.useEffect(() => {
-    var _item$value2;
-    const itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
-    setFilterValueState(String(itemValue));
-  }, [item.value]);
+    const itemPlusTag = item;
+    if (itemPlusTag.fromInput !== id) {
+      var _item$value2;
+      setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
+    }
+  }, [id, item]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),

package/components/panel/filterPanel/GridFilterPanel.js

@@ -37,9 +37,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       disableRemoveAllButton = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const applyFilter = React.useCallback(item => {
-    apiRef.current.upsertFilterItem(item);
-  }, [apiRef]);
+  const applyFilter = apiRef.current.upsertFilterItem;
   const applyFilterLogicOperator = React.useCallback(operator => {
     apiRef.current.setFilterLogicOperator(operator);
   }, [apiRef]);

package/components/toolbar/GridToolbarColumnsButton.js

@@ -26,7 +26,7 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
-    onClick == null ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
 
   // Disable the button if the corresponding is disabled

package/components/toolbar/GridToolbarDensitySelector.js

@@ -54,7 +54,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   }, [densityValue, rootProps]);
   const handleDensitySelectorOpen = event => {
     setOpen(prevOpen => !prevOpen);
-    onClick == null ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
   const handleDensitySelectorClickAway = event => {
     var _buttonRef$current;

package/components/toolbar/GridToolbarExport.js

@@ -19,7 +19,7 @@ export function GridCsvExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
-      hideMenu == null ? void 0 : hideMenu();
+      hideMenu == null || hideMenu();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
@@ -35,7 +35,7 @@ export function GridPrintExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
-      hideMenu == null ? void 0 : hideMenu();
+      hideMenu == null || hideMenu();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')

package/components/toolbar/GridToolbarExportContainer.js

@@ -27,7 +27,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   const handleRef = useForkRef(ref, buttonRef);
   const handleMenuOpen = event => {
     setOpen(prevOpen => !prevOpen);
-    onClick == null ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {

package/components/toolbar/GridToolbarFilterButton.js

@@ -89,7 +89,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
-    (_buttonProps$onClick = buttonProps.onClick) == null ? void 0 : _buttonProps$onClick.call(buttonProps, event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
 
   // Disable the button if the corresponding is disabled

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -16,7 +16,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
     quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
     /**
      * The debounce time in milliseconds.
-     * @default 500
+     * @default 150
      */
     debounceMs?: number;
 };

package/components/toolbar/GridToolbarQuickFilter.js

@@ -46,15 +46,15 @@ const defaultSearchValueParser = searchText => searchText.split(' ').filter(word
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   var _rootProps$slotProps, _rootProps$slotProps2;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = 500
+      debounceMs = rootProps.filterDebounceMs
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
@@ -117,7 +117,7 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The debounce time in milliseconds.
-   * @default 500
+   * @default 150
    */
   debounceMs: PropTypes.number,
   /**

package/hooks/features/export/useGridPrintExport.js

@@ -8,6 +8,7 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getColumnsToExport } from './utils';
+import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
@@ -46,11 +47,6 @@ export const useGridPrintExport = (apiRef, props) => {
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly
   const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
-    // TODO remove unused Promise
-    if (!fields && !allColumns) {
-      resolve();
-      return;
-    }
     const exportedColumnFields = getColumnsToExport({
       apiRef,
       options: {
@@ -94,12 +90,12 @@ export const useGridPrintExport = (apiRef, props) => {
     let gridFooterElementHeight = ((_querySelector2 = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)) == null ? void 0 : _querySelector2.offsetHeight) || 0;
     if (normalizeOptions.hideToolbar) {
       var _gridClone$querySelec;
-      (_gridClone$querySelec = gridClone.querySelector(`.${gridClasses.toolbarContainer}`)) == null ? void 0 : _gridClone$querySelec.remove();
+      (_gridClone$querySelec = gridClone.querySelector(`.${gridClasses.toolbarContainer}`)) == null || _gridClone$querySelec.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter) {
       var _gridClone$querySelec2;
-      (_gridClone$querySelec2 = gridClone.querySelector(`.${gridClasses.footerContainer}`)) == null ? void 0 : _gridClone$querySelec2.remove();
+      (_gridClone$querySelec2 = gridClone.querySelector(`.${gridClasses.footerContainer}`)) == null || _gridClone$querySelec2.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -197,7 +193,14 @@ export const useGridPrintExport = (apiRef, props) => {
     previousColumnVisibility.current = gridColumnVisibilityModelSelector(apiRef);
     if (props.pagination) {
       const visibleRowCount = gridExpandedRowCountSelector(apiRef);
-      apiRef.current.setPageSize(visibleRowCount);
+      const paginationModel = {
+        page: 0,
+        pageSize: visibleRowCount
+      };
+      apiRef.current.updateControlState('pagination',
+      // Using signature `DataGridPro` to allow more than 100 rows in the print export
+      mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.forceUpdate();
     }
     await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns);
     apiRef.current.unstable_disableVirtualization();

package/hooks/features/export/utils.js

@@ -7,7 +7,13 @@ export const getColumnsToExport = ({
 }) => {
   const columns = gridColumnDefinitionsSelector(apiRef);
   if (options.fields) {
-    return options.fields.map(field => columns.find(column => column.field === field)).filter(column => !!column);
+    return options.fields.reduce((currentColumns, field) => {
+      const column = columns.find(col => col.field === field);
+      if (column) {
+        currentColumns.push(column);
+      }
+      return currentColumns;
+    }, []);
   }
   const validColumns = options.allColumns ? columns : gridVisibleColumnDefinitionsSelector(apiRef);
   return validColumns.filter(column => !column.disableExport);

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -21,7 +21,7 @@ export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, d
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export declare const buildAggregatedFilterItemsApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
+export declare const buildAggregatedFilterItemsApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>, disableEval: boolean) => GridFilterItemApplierNotAggregated | null;
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
@@ -30,7 +30,7 @@ export declare const buildAggregatedFilterItemsApplier: (getRowId: GridRowIdGett
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 export declare const buildAggregatedQuickFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
-export declare const buildAggregatedFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier;
+export declare const buildAggregatedFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
 type FilterCache = {
     cleanedFilterItems?: GridFilterItem[];
 };

package/hooks/features/filter/gridFilterUtils.js

@@ -4,6 +4,13 @@ import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
+let hasEval;
+try {
+  // eslint-disable-next-line no-eval
+  hasEval = eval('true');
+} catch (_) {
+  hasEval = false;
+}
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -127,7 +134,7 @@ let filterItemsApplierId = 1;
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef) => {
+export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disableEval) => {
   const {
     items
   } = filterModel;
@@ -135,22 +142,19 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef)
   if (appliers.length === 0) {
     return null;
   }
-
-  // Original logic:
-  // return (row, shouldApplyFilter) => {
-  //   const resultPerItemId: GridFilterItemResult = {};
-  //
-  //   for (let i = 0; i < appliers.length; i += 1) {
-  //     const applier = appliers[i];
-  //     if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
-  //       resultPerItemId[applier.item.id!] = applier.v7
-  //         ? applier.fn(row)
-  //         : applier.fn(getRowId ? getRowId(row) : row.id);
-  //     }
-  //   }
-  //
-  //   return resultPerItemId;
-  // };
+  if (!hasEval || disableEval) {
+    // This is the original logic, which is used if `eval()` is not supported (aka prevented by CSP).
+    return (row, shouldApplyFilter) => {
+      const resultPerItemId = {};
+      for (let i = 0; i < appliers.length; i += 1) {
+        const applier = appliers[i];
+        if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
+          resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(getRowId ? getRowId(row) : row.id);
+        }
+      }
+      return resultPerItemId;
+    };
+  }
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
@@ -260,8 +264,8 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
     return result;
   };
 };
-export const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef);
+export const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef, disableEval) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef, disableEval);
   const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
     var _isRowMatchingFilterI, _isRowMatchingQuickFi;

package/hooks/features/filter/useGridFilter.d.ts

@@ -8,4 +8,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter'>) => void;
+export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter' | 'disableEval'>) => void;

package/hooks/features/filter/useGridFilter.js

@@ -61,7 +61,7 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(props.getRowId, filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(props.getRowId, filterModel, apiRef, props.disableEval) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
@@ -75,7 +75,7 @@ export const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [apiRef, props.filterMode, props.getRowId]);
+  }, [apiRef, props.filterMode, props.getRowId, props.disableEval]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;

package/hooks/features/pagination/useGridPagination.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { GridPaginationState } from './gridPaginationInterfaces';
+import { GridPaginationModel } from '../../../models/gridPaginationProps';
 export declare const paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature'>>;
+export declare const mergeStateWithPaginationModel: (rowCount: number, signature: DataGridProcessedProps['signature'], paginationModelProp?: GridPaginationModel) => (paginationState: GridPaginationState) => {
+    paginationModel: GridPaginationModel;
+};
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after

package/hooks/features/pagination/useGridPagination.js

@@ -17,7 +17,7 @@ export const paginationStateInitializer = (state, props) => {
     }
   });
 };
-const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp) => paginationState => {
+export const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp) => paginationState => {
   var _paginationModelProp$;
   let paginationModel = paginationState.paginationModel;
   const pageSize = (_paginationModelProp$ = paginationModelProp == null ? void 0 : paginationModelProp.pageSize) != null ? _paginationModelProp$ : paginationModel.pageSize;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -266,7 +266,7 @@ export const useGridRowSelection = (apiRef, props) => {
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
-      (_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.removeAllRanges();
+      (_window$getSelection = window.getSelection()) == null || _window$getSelection.removeAllRanges();
     }
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {

package/hooks/features/rows/useGridRows.js

@@ -52,6 +52,16 @@ export const useGridRows = (apiRef, props) => {
     }
     return null;
   }, [apiRef]);
+  const getRowIdProp = props.getRowId;
+  const getRowId = React.useCallback(row => {
+    if (GRID_ID_AUTOGENERATED in row) {
+      return row[GRID_ID_AUTOGENERATED];
+    }
+    if (getRowIdProp) {
+      return getRowIdProp(row);
+    }
+    return row.id;
+  }, [getRowIdProp]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id
   }, index) => {
@@ -297,6 +307,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    getRowId,
     getRowModels,
     getRowsCount,
     getAllRowIds,

package/hooks/features/rows/useGridRowsMeta.js

@@ -145,10 +145,10 @@ export const useGridRowsMeta = (apiRef, props) => {
       }
       return acc + maximumBaseSize + otherSizes;
     }, 0);
-    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {
+    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null || _pinnedRows$top.forEach(row => {
       calculateRowProcessedSizes(row);
     });
-    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(row => {
+    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null || _pinnedRows$bottom.forEach(row => {
       calculateRowProcessedSizes(row);
     });
     apiRef.current.setState(state => {

package/hooks/utils/useGridApiEventHandler.js

@@ -30,7 +30,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       const enhancedHandler = (params, event, details) => {
         if (!event.defaultMuiPrevented) {
           var _handlerRef$current;
-          (_handlerRef$current = handlerRef.current) == null ? void 0 : _handlerRef$current.call(handlerRef, params, event, details);
+          (_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event, details);
         }
       };
       subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -42,7 +42,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       // The callback below will be called once this reference stops being retained
       () => {
         var _subscription$current;
-        (_subscription$current = subscription.current) == null ? void 0 : _subscription$current.call(subscription);
+        (_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
         subscription.current = null;
         cleanupTokenRef.current = null;
       }, cleanupTokenRef.current);
@@ -59,7 +59,7 @@ export function createUseGridApiEventHandler(registryContainer) {
         const enhancedHandler = (params, event, details) => {
           if (!event.defaultMuiPrevented) {
             var _handlerRef$current2;
-            (_handlerRef$current2 = handlerRef.current) == null ? void 0 : _handlerRef$current2.call(handlerRef, params, event, details);
+            (_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event, details);
           }
         };
         subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -72,7 +72,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       }
       return () => {
         var _subscription$current2;
-        (_subscription$current2 = subscription.current) == null ? void 0 : _subscription$current2.call(subscription);
+        (_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
         subscription.current = null;
       };
     }, [apiRef, eventName, options]);
@@ -86,7 +86,7 @@ const registryContainer = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_resetCleanupTracking = () => {
   var _registryContainer$re;
-  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  (_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
   registryContainer.registry = null;
 };
 export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);

package/hooks/utils/useLazyRef.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 const UNINITIALIZED = {};
+
+// See https://github.com/facebook/react/issues/14490 for when to use this.
 export function useLazyRef(init, initArg) {
   const ref = React.useRef(UNINITIALIZED);
   if (ref.current === UNINITIALIZED) {

package/hooks/utils/useTimeout.d.ts

@@ -0,0 +1,9 @@
+declare class Timeout {
+    static create(): Timeout;
+    currentId: number;
+    start(delay: number, fn: Function): void;
+    clear: () => void;
+    disposeEffect: () => () => void;
+}
+export declare function useTimeout(): Timeout;
+export {};

package/hooks/utils/useTimeout.js

@@ -0,0 +1,28 @@
+import { useLazyRef } from './useLazyRef';
+import { useOnMount } from './useOnMount';
+class Timeout {
+  constructor() {
+    this.currentId = 0;
+    this.clear = () => {
+      if (this.currentId !== 0) {
+        clearTimeout(this.currentId);
+        this.currentId = 0;
+      }
+    };
+    this.disposeEffect = () => {
+      return this.clear;
+    };
+  }
+  static create() {
+    return new Timeout();
+  }
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(fn, delay);
+  }
+}
+export function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}

package/index.js

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

package/joy/joySlots.js

@@ -231,10 +231,10 @@ const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     listboxOpen: open,
     onListboxOpenChange: isOpen => {
       if (isOpen) {
-        onOpen == null ? void 0 : onOpen({});
+        onOpen == null || onOpen({});
       } else {
         var _MenuProps$onClose;
-        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null ? void 0 : _MenuProps$onClose.call(MenuProps, {}, undefined);
+        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null || _MenuProps$onClose.call(MenuProps, {}, undefined);
       }
     },
     size: convertSize(size),

package/legacy/DataGrid/DataGrid.js

@@ -5,7 +5,7 @@ import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
-import { useDataGridProps } from './useDataGridProps';
+import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
 import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,6 +28,18 @@ var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref)
   });
 });
 export var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
+export var SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
+export var SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -143,6 +155,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableDensitySelector: PropTypes.bool,
+  /**
+   * If `true`, `eval()` is not used for performance optimization.
+   * @default false
+   * @ignore - do not document
+   */
+  disableEval: PropTypes.bool,
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
@@ -167,6 +185,11 @@ DataGridRaw.propTypes = {
     columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering.
+   * @default 150
+   */
+  filterDebounceMs: PropTypes.number,
   /**
    * Filtering can be processed on the server or client-side.
    * Set it to 'server' if you would like to handle filtering on the server-side.

package/legacy/DataGrid/useDataGridProps.js

@@ -38,6 +38,7 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnMenu: false,
   disableColumnSelector: false,
   disableDensitySelector: false,
+  disableEval: false,
   disableMultipleColumnsFiltering: false,
   disableMultipleRowSelection: false,
   disableMultipleColumnsSorting: false,
@@ -45,6 +46,7 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableVirtualization: false,
   editMode: GridEditModes.Cell,
   filterMode: 'client',
+  filterDebounceMs: 150,
   columnHeaderHeight: 56,
   hideFooter: false,
   hideFooterPagination: false,

package/legacy/components/cell/GridActionsCell.js

@@ -68,7 +68,7 @@ function GridActionsCell(props) {
         var _ref2 = _slicedToArray(_ref, 2),
           index = _ref2[0],
           ref = _ref2[1];
-        ref == null ? void 0 : ref.stop({}, function () {
+        ref == null || ref.stop({}, function () {
           delete touchRippleRefs.current[index];
         });
       });

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -59,7 +59,7 @@ function GridEditSingleSelectCell(props) {
   useEnhancedEffect(function () {
     if (hasFocus) {
       var _inputRef$current;
-      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
     }
   }, [hasFocus]);
   if (!isSingleSelectColDef(colDef)) {