@mui/x-data-grid 7.0.0-beta.7 → 7.0.0

package/hooks/features/editing/useGridEditing.js

@@ -106,9 +106,8 @@ export const useGridEditing = (apiRef, props) => {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
-    var _editingState$id$fiel, _editingState$id;
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return (_editingState$id$fiel = (_editingState$id = editingState[id]) == null ? void 0 : _editingState$id[field]) != null ? _editingState$id$fiel : null;
+    return editingState[id]?.[field] ?? null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/hooks/features/editing/useGridRowEditing.js

@@ -16,7 +16,7 @@ import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
-const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -76,8 +76,7 @@ export const useGridRowEditing = (apiRef, props) => {
     // focus we check if the next cell that received focus is from a different row.
     nextFocusedCell.current = null;
     focusTimeout.current = setTimeout(() => {
-      var _nextFocusedCell$curr;
-      if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+      if (nextFocusedCell.current?.id !== params.id) {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {
           return;
@@ -541,9 +540,8 @@ export const useGridRowEditing = (apiRef, props) => {
     prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
     Object.entries(rowModesModel).forEach(([id, params]) => {
-      var _copyOfPrevRowModesMo, _idToIdLookup$id;
-      const prevMode = ((_copyOfPrevRowModesMo = copyOfPrevRowModesModel[id]) == null ? void 0 : _copyOfPrevRowModesMo.mode) || GridRowModes.View;
-      const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+      const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
+      const originalId = idToIdLookup[id] ?? id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
         updateStateToStartRowEditMode(_extends({
           id: originalId

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -6,6 +6,7 @@ import type { GridApiCommunity } from '../../../../models/api/gridApiCommunity';
 export declare const serializeCellValue: (cellParams: GridCellParams, options: {
     delimiterCharacter: string;
     ignoreValueFormatter: boolean;
+    shouldAppendQuotes: boolean;
 }) => any;
 interface BuildCSVOptions {
     columns: GridStateColDef[];
@@ -15,6 +16,7 @@ interface BuildCSVOptions {
     includeColumnGroupsHeaders: NonNullable<GridCsvExportOptions['includeColumnGroupsHeaders']>;
     ignoreValueFormatter: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
+    shouldAppendQuotes: boolean;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};

package/hooks/features/export/serializers/csvSerializer.js

@@ -1,10 +1,13 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-function sanitizeCellValue(value, delimiterCharacter) {
+function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
   if (typeof value === 'string') {
     // Make sure value containing delimiter or line break won't be split into multiple rows
     if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
-      return `"${value.replace(/"/g, '""')}"`;
+      if (shouldAppendQuotes) {
+        return `"${value.replace(/"/g, '""')}"`;
+      }
+      return `${value.replace(/"/g, '""')}`;
     }
     return value;
   }
@@ -13,18 +16,17 @@ function sanitizeCellValue(value, delimiterCharacter) {
 export const serializeCellValue = (cellParams, options) => {
   const {
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   } = options;
   let value;
   if (ignoreValueFormatter) {
-    var _cellParams$value2;
     const columnType = cellParams.colDef.type;
     if (columnType === 'number') {
       value = String(cellParams.value);
     } else if (columnType === 'date' || columnType === 'dateTime') {
-      var _cellParams$value;
-      value = (_cellParams$value = cellParams.value) == null ? void 0 : _cellParams$value.toISOString();
-    } else if (typeof ((_cellParams$value2 = cellParams.value) == null ? void 0 : _cellParams$value2.toString) === 'function') {
+      value = cellParams.value?.toISOString();
+    } else if (typeof cellParams.value?.toString === 'function') {
       value = cellParams.value.toString();
     } else {
       value = cellParams.value;
@@ -32,7 +34,7 @@ export const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter);
+  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
 };
 const objectFormattedValueWarning = buildWarning(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 class CSVRow {
@@ -49,7 +51,7 @@ class CSVRow {
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
     } else {
       this.rowString += value;
     }
@@ -64,10 +66,12 @@ const serializeRow = ({
   columns,
   getCellParams,
   delimiterCharacter,
-  ignoreValueFormatter
+  ignoreValueFormatter,
+  shouldAppendQuotes
 }) => {
   const row = new CSVRow({
-    delimiterCharacter
+    delimiterCharacter,
+    shouldAppendQuotes
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -78,7 +82,8 @@ const serializeRow = ({
     }
     row.addValue(serializeCellValue(cellParams, {
       delimiterCharacter,
-      ignoreValueFormatter
+      ignoreValueFormatter,
+      shouldAppendQuotes
     }));
   });
   return row.getRowString();
@@ -91,14 +96,16 @@ export function buildCSV(options) {
     includeHeaders,
     includeColumnGroupsHeaders,
     ignoreValueFormatter,
-    apiRef
+    apiRef,
+    shouldAppendQuotes
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   })}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
@@ -117,7 +124,8 @@ export function buildCSV(options) {
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
         delimiterCharacter,
-        sanitizeCellValue
+        sanitizeCellValue,
+        shouldAppendQuotes
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -129,7 +137,8 @@ export function buildCSV(options) {
   }
   const mainHeaderRow = new CSVRow({
     delimiterCharacter,
-    sanitizeCellValue
+    sanitizeCellValue,
+    shouldAppendQuotes
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

package/hooks/features/export/useGridCsvExport.js

@@ -17,15 +17,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridCsvExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
-  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
-    var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
     logger.debug(`Get data as CSV`);
     const exportedColumns = getColumnsToExport({
       apiRef,
       options
     });
-    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
+    const getRowsToExport = options.getRowsToExport ?? defaultGetRowsToExport;
     const exportedRowIds = getRowsToExport({
       apiRef
     });
@@ -33,19 +32,20 @@ export const useGridCsvExport = (apiRef, props) => {
       columns: exportedColumns,
       rowIds: exportedRowIds,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
-      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+      includeHeaders: options.includeHeaders ?? true,
+      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
       ignoreValueFormatter,
-      apiRef
+      apiRef,
+      shouldAppendQuotes: options.shouldAppendQuotes ?? true
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {
     logger.debug(`Export data as CSV`);
     const csv = getDataAsCsv(options);
-    const blob = new Blob([options != null && options.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
+    const blob = new Blob([options?.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
       type: 'text/csv'
     });
-    exportAs(blob, 'csv', options == null ? void 0 : options.fileName);
+    exportAs(blob, 'csv', options?.fileName);
   }, [logger, getDataAsCsv]);
   const csvExportApi = {
     getDataAsCsv,
@@ -57,8 +57,7 @@ export const useGridCsvExport = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const addExportMenuButtons = React.useCallback((initialValue, options) => {
-    var _options$csvOptions;
-    if ((_options$csvOptions = options.csvOptions) != null && _options$csvOptions.disableToolbarButton) {
+    if (options.csvOptions?.disableToolbarButton) {
       return initialValue;
     }
     return [...initialValue, {

package/hooks/features/export/useGridPrintExport.js

@@ -75,7 +75,6 @@ export const useGridPrintExport = (apiRef, props) => {
     apiRef.current.setRows(newRows);
   }, [apiRef]);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
-    var _querySelector, _querySelector2;
     const normalizeOptions = _extends({
       copyStyles: true,
       hideToolbar: false,
@@ -96,16 +95,14 @@ export const useGridPrintExport = (apiRef, props) => {
 
     // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
     gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = ((_querySelector = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)) == null ? void 0 : _querySelector.offsetHeight) || 0;
-    let gridFooterElementHeight = ((_querySelector2 = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)) == null ? void 0 : _querySelector2.offsetHeight) || 0;
+    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
+    let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
     if (normalizeOptions.hideToolbar) {
-      var _gridClone$querySelec;
-      (_gridClone$querySelec = gridClone.querySelector(`.${gridClasses.toolbarContainer}`)) == null || _gridClone$querySelec.remove();
+      gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter) {
-      var _gridClone$querySelec2;
-      (_gridClone$querySelec2 = gridClone.querySelector(`.${gridClasses.footerContainer}`)) == null || _gridClone$querySelec2.remove();
+      gridClone.querySelector(`.${gridClasses.footerContainer}`)?.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -186,13 +183,12 @@ export const useGridPrintExport = (apiRef, props) => {
     }
   }, [apiRef, doc, props.columnHeaderHeight]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
-    var _previousGridState$cu;
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);
 
     // Revert grid to previous state
     apiRef.current.restoreState(previousGridState.current || {});
-    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu = _previousGridState$cu.columns) != null && _previousGridState$cu.columnVisibilityModel)) {
+    if (!previousGridState.current?.columns?.columnVisibilityModel) {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }
@@ -205,7 +201,6 @@ export const useGridPrintExport = (apiRef, props) => {
     previousRows.current = [];
   }, [apiRef]);
   const exportDataAsPrint = React.useCallback(async options => {
-    var _options$getRowsToExp;
     logger.debug(`Export data as Print`);
     if (!apiRef.current.rootElementRef.current) {
       throw new Error('MUI X: No grid root element available.');
@@ -229,11 +224,11 @@ export const useGridPrintExport = (apiRef, props) => {
       }));
       apiRef.current.forceUpdate();
     }
-    await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns, options == null ? void 0 : options.includeCheckboxes);
-    updateGridRowsForPrint((_options$getRowsToExp = options == null ? void 0 : options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport);
+    await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
+    updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
     apiRef.current.unstable_setVirtualization(false);
     await raf(); // wait for the state changes to take action
-    const printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
+    const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {
       doc.current.body.appendChild(printWindow);
       // In test env, run the all pipeline without waiting for loading
@@ -262,8 +257,7 @@ export const useGridPrintExport = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const addExportMenuButtons = React.useCallback((initialValue, options) => {
-    var _options$printOptions;
-    if ((_options$printOptions = options.printOptions) != null && _options$printOptions.disableToolbarButton) {
+    if (options.printOptions?.disableToolbarButton) {
       return initialValue;
     }
     return [...initialValue, {

package/hooks/features/export/utils.js

@@ -21,14 +21,13 @@ export const getColumnsToExport = ({
 export const defaultGetRowsToExport = ({
   apiRef
 }) => {
-  var _pinnedRows$top, _pinnedRows$bottom;
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
   const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = gridPinnedRowsSelector(apiRef);
-  const topPinnedRowsIds = (pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
-  const bottomPinnedRowsIds = (pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];
+  const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
+  const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];
   bodyRows.unshift(...topPinnedRowsIds);
   bodyRows.push(...bottomPinnedRowsIds);
   if (selectedRows.size > 0) {

package/hooks/features/filter/gridFilterSelector.js

@@ -74,10 +74,7 @@ export const gridFilteredSortedTopLevelRowEntriesSelector = createSelectorMemoiz
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }
-  return visibleSortedRows.filter(row => {
-    var _rowTree$row$id;
-    return ((_rowTree$row$id = rowTree[row.id]) == null ? void 0 : _rowTree$row$id.depth) === 0;
-  });
+  return visibleSortedRows.filter(row => rowTree[row.id]?.depth === 0);
 });
 
 /**
@@ -96,24 +93,20 @@ export const gridFilteredTopLevelRowCountSelector = createSelector(gridFilteredS
  * @category Filtering
  * @ignore - do not document.
  */
-export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterModelSelector, gridColumnLookupSelector, (filterModel, columnLookup) => {
-  var _filterModel$items;
-  return (_filterModel$items = filterModel.items) == null ? void 0 : _filterModel$items.filter(item => {
-    var _column$filterOperato, _item$value;
-    if (!item.field) {
-      return false;
-    }
-    const column = columnLookup[item.field];
-    if (!(column != null && column.filterOperators) || (column == null || (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
-      return false;
-    }
-    const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);
-    if (!filterOperator) {
-      return false;
-    }
-    return !filterOperator.InputComponent || item.value != null && ((_item$value = item.value) == null ? void 0 : _item$value.toString()) !== '';
-  });
-});
+export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterModelSelector, gridColumnLookupSelector, (filterModel, columnLookup) => filterModel.items?.filter(item => {
+  if (!item.field) {
+    return false;
+  }
+  const column = columnLookup[item.field];
+  if (!column?.filterOperators || column?.filterOperators?.length === 0) {
+    return false;
+  }
+  const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);
+  if (!filterOperator) {
+    return false;
+  }
+  return !filterOperator.InputComponent || item.value != null && item.value?.toString() !== '';
+}));
 /**
  * @category Filtering
  * @ignore - do not document.

package/hooks/features/filter/gridFilterUtils.js

@@ -87,9 +87,8 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   }
   let parsedValue;
   if (column.valueParser) {
-    var _filterItem$value;
     const parser = column.valueParser;
-    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
+    parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }
@@ -103,7 +102,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
     value: parsedValue
   });
   const filterOperators = column.filterOperators;
-  if (!(filterOperators != null && filterOperators.length)) {
+  if (!filterOperators?.length) {
     throw new Error(`MUI X: No filter operators found for column '${column.field}'.`);
   }
   const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operator);
@@ -157,7 +156,7 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
   }
 
   // We generate a new function with `new Function()` to avoid expensive patterns for JS engines
-  // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
+  // such as a dynamic object assignment, for example `{ [dynamicKey]: value }`.
   const filterItemCore = new Function('appliers', 'row', 'shouldApplyFilter', `"use strict";
 ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 
@@ -173,8 +172,7 @@ return result$$;`.replaceAll('$$', String(filterItemsApplierId)));
   return filterItem;
 };
 export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
-  var _filterModel$quickFil;
-  return (_filterModel$quickFil = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil : true;
+  return filterModel.quickFilterExcludeHiddenColumns ?? true;
 };
 
 /**
@@ -184,8 +182,7 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
  * @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.
  */
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
-  var _filterModel$quickFil2, _filterModel$quickFil3;
-  const quickFilterValues = (_filterModel$quickFil2 = (_filterModel$quickFil3 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil3.filter(Boolean)) != null ? _filterModel$quickFil2 : [];
+  const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
   }
@@ -197,7 +194,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const publicApiRef = getPublicApiRef(apiRef);
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
-    const getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
+    const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
     if (getApplyQuickFilterFn) {
       appliersPerField.push({
         column,
@@ -252,9 +249,8 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) =
   const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
   const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
-    var _isRowMatchingFilterI, _isRowMatchingQuickFi;
-    result.passingFilterItems = (_isRowMatchingFilterI = isRowMatchingFilterItems == null ? void 0 : isRowMatchingFilterItems(row, shouldApplyFilter)) != null ? _isRowMatchingFilterI : null;
-    result.passingQuickFilterValues = (_isRowMatchingQuickFi = isRowMatchingQuickFilter == null ? void 0 : isRowMatchingQuickFilter(row, shouldApplyFilter)) != null ? _isRowMatchingQuickFi : null;
+    result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
+    result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;
   };
 };
 const isNotNull = result => result != null;
@@ -271,12 +267,11 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
 
   // get result for filter items model
   if (cleanedFilterItemResults.length > 0) {
-    var _filterModel$logicOpe;
     // Return true if the item pass with one of the rows
     const filterItemPredicate = item => {
       return cleanedFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
     };
-    const logicOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : getDefaultGridFilterModel().logicOperator;
+    const logicOperator = filterModel.logicOperator ?? getDefaultGridFilterModel().logicOperator;
     if (logicOperator === GridLogicOperator.And) {
       const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -292,12 +287,11 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
 
   // get result for quick filter model
   if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
-    var _filterModel$quickFil4;
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = value => {
       return cleanedQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
     };
-    const quickFilterLogicOperator = (_filterModel$quickFil4 = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil4 : getDefaultGridFilterModel().quickFilterLogicOperator;
+    const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? getDefaultGridFilterModel().quickFilterLogicOperator;
     if (quickFilterLogicOperator === GridLogicOperator.And) {
       const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {

package/hooks/features/filter/useGridFilter.js

@@ -18,8 +18,7 @@ import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilter
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
-  var _ref, _props$filterModel, _props$initialState;
-  const filterModel = (_ref = (_props$filterModel = props.filterModel) != null ? _props$filterModel : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.filter) == null ? void 0 : _props$initialState.filterModel) != null ? _ref : getDefaultGridFilterModel();
+  const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
@@ -49,7 +48,6 @@ function createMemoizedValues() {
  * @requires useGridRows (event)
  */
 export const useGridFilter = (apiRef, props) => {
-  var _props$initialState3, _props$slotProps2;
   const logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
     stateId: 'filter',
@@ -64,7 +62,7 @@ export const useGridFilter = (apiRef, props) => {
       const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
-        filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
+        filterModel: filterModel ?? getDefaultGridFilterModel()
       });
       const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
@@ -133,7 +131,6 @@ export const useGridFilter = (apiRef, props) => {
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
       const filterItemsWithValue = filterModel.items.filter(item => {
-        var _column$filterOperato;
         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.
@@ -143,8 +140,8 @@ export const useGridFilter = (apiRef, props) => {
           return true;
         }
         const column = apiRef.current.getColumn(item.field);
-        const filterOperator = (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.find(operator => operator.value === item.operator);
-        const requiresFilterValue = typeof (filterOperator == null ? void 0 : filterOperator.requiresFilterValue) === 'undefined' ? true : filterOperator == null ? void 0 : filterOperator.requiresFilterValue;
+        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`.
         // So we don't want to remove them from the filter model if `item.value === undefined`.
@@ -224,7 +221,6 @@ export const useGridFilter = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2;
     const filterModelToExport = gridFilterModelSelector(apiRef);
     const shouldExportFilterModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -232,7 +228,7 @@ export const useGridFilter = (apiRef, props) => {
     // Always export if the model is controlled
     props.filterModel != null ||
     // Always export if the model has been initialized
-    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.filter) == null ? void 0 : _props$initialState2.filterModel) != null ||
+    props.initialState?.filter?.filterModel != null ||
     // Export if the model is not equal to the default value
     !isDeepEqual(filterModelToExport, getDefaultGridFilterModel());
     if (!shouldExportFilterModel) {
@@ -243,10 +239,9 @@ export const useGridFilter = (apiRef, props) => {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.filter) == null ? void 0 : _props$initialState3.filterModel]);
+  }, [apiRef, props.filterModel, props.initialState?.filter?.filterModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
-    const filterModel = (_context$stateToResto = context.stateToRestore.filter) == null ? void 0 : _context$stateToResto.filterModel;
+    const filterModel = context.stateToRestore.filter?.filterModel;
     if (filterModel == null) {
       return params;
     }
@@ -257,12 +252,11 @@ export const useGridFilter = (apiRef, props) => {
   }, [apiRef, props.disableMultipleColumnsFiltering]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.filters) {
-      var _props$slotProps;
       const FilterPanel = props.slots.filterPanel;
-      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, (_props$slotProps = props.slotProps) == null ? void 0 : _props$slotProps.filterPanel));
+      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, props.slotProps?.filterPanel));
     }
     return initialValue;
-  }, [props.slots.filterPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.filterPanel]);
+  }, [props.slots.filterPanel, props.slotProps?.filterPanel]);
   const {
     getRowId
   } = props;

package/hooks/features/focus/useGridFocus.js

@@ -44,7 +44,7 @@ export const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   const setCellFocus = React.useCallback((id, field) => {
     const focusedCell = gridFocusCellSelector(apiRef);
-    if ((focusedCell == null ? void 0 : focusedCell.id) === id && (focusedCell == null ? void 0 : focusedCell.field) === field) {
+    if (focusedCell?.id === id && focusedCell?.field === field) {
       return;
     }
     apiRef.current.setState(state => {
@@ -252,8 +252,7 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
   }, [apiRef]);
   const handleBlur = React.useCallback((_, event) => {
-    var _event$relatedTarget;
-    if ((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.className.includes(gridClasses.columnHeader)) {
+    if (event.relatedTarget?.className.includes(gridClasses.columnHeader)) {
       return;
     }
     logger.debug(`Clearing focus`);
@@ -286,11 +285,11 @@ export const useGridFocus = (apiRef, props) => {
       }
       return;
     }
-    if ((cellParams == null ? void 0 : cellParams.id) === focusedCell.id && (cellParams == null ? void 0 : cellParams.field) === focusedCell.field) {
+    if (cellParams?.id === focusedCell.id && cellParams?.field === focusedCell.field) {
       return;
     }
     const cellElement = apiRef.current.getCellElement(focusedCell.id, focusedCell.field);
-    if (cellElement != null && cellElement.contains(event.target)) {
+    if (cellElement?.contains(event.target)) {
       return;
     }
     if (cellParams) {
@@ -316,7 +315,7 @@ export const useGridFocus = (apiRef, props) => {
       return;
     }
     const cell = gridFocusCellSelector(apiRef);
-    if ((cell == null ? void 0 : cell.id) !== params.id || (cell == null ? void 0 : cell.field) !== params.field) {
+    if (cell?.id !== params.id || cell?.field !== params.field) {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -2,9 +2,6 @@ import { createSelector } from '../../../utils/createSelector';
 export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
 export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
 // No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
-headerFilteringState => {
-  var _headerFilteringState;
-  return (_headerFilteringState = headerFilteringState == null ? void 0 : headerFilteringState.enabled) != null ? _headerFilteringState : false;
-});
+headerFilteringState => headerFilteringState?.enabled ?? false);
 export const gridHeaderFilteringEditFieldSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
 export const gridHeaderFilteringMenuSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);