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

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -41,7 +41,6 @@ const SingleSelectOperatorContainer = styled('div')({
   }
 });
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   const {
       item,
       applyValue,
@@ -55,11 +54,11 @@ function GridFilterInputSingleSelect(props) {
       clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  const filterValue = (_item$value = item.value) != null ? _item$value : '';
+  const filterValue = item.value ?? '';
   const id = useId();
   const labelId = useId();
   const rootProps = useGridRootProps();
-  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : false;
+  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -67,8 +66,8 @@ function GridFilterInputSingleSelect(props) {
       resolvedColumn = column;
     }
   }
-  const getOptionValue = (_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue;
-  const getOptionLabel = (_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.getOptionLabel;
+  const getOptionValue = resolvedColumn?.getOptionValue;
+  const getOptionLabel = resolvedColumn?.getOptionLabel;
   const currentValueOptions = React.useMemo(() => {
     return getValueOptions(resolvedColumn);
   }, [resolvedColumn]);
@@ -84,11 +83,11 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
       fullWidth: true,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
         shrink: true,
@@ -105,18 +104,18 @@ function GridFilterInputSingleSelect(props) {
         inputProps: {
           tabIndex,
           ref: focusElementRef,
-          placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
         native: isSelectNative,
         notched: variant === 'outlined' ? true : undefined
-      }, others /* FIXME: typing error */, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,
           getOptionLabel,
           getOptionValue,
           isSelectNative,
-          baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
         })
       }))]
     }), clearButton]
@@ -135,7 +134,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: PropTypes.bool,
   item: PropTypes.shape({

package/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -6,7 +6,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFiel
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (e.g. `isEmpty`)
+     * required is selected (for example `isEmpty`)
      */
     isFilterActive?: boolean;
 };

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -8,7 +8,6 @@ import { useTimeout } from '../../../hooks/utils/useTimeout';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$slotProps;
   const {
       item,
       applyValue,
@@ -23,7 +22,7 @@ function GridFilterInputValue(props) {
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
-  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
+  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
@@ -45,8 +44,7 @@ function GridFilterInputValue(props) {
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value === undefined) {
-      var _item$value2;
-      setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
+      setFilterValueState(String(item.value ?? ''));
     }
   }, [id, item]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
@@ -67,13 +65,13 @@ function GridFilterInputValue(props) {
     }, InputProps, {
       inputProps: _extends({
         tabIndex
-      }, InputProps == null ? void 0 : InputProps.inputProps)
+      }, InputProps?.inputProps)
     }),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField));
+  }, others, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -88,7 +86,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: PropTypes.bool,
   item: PropTypes.shape({

package/components/panel/filterPanel/GridFilterPanel.js

@@ -21,7 +21,6 @@ const getGridFilter = col => ({
   id: Math.round(Math.random() * 1e5)
 });
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
@@ -47,7 +46,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
       // To allow override the column for default (first) filter
       const nextFieldName = getColumnForNewFilter({
-        currentFilters: (filterModel == null ? void 0 : filterModel.items) || [],
+        currentFilters: filterModel?.items || [],
         columns: filterableColumns
       });
       if (nextFieldName === null) {
@@ -57,16 +56,13 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
         field
       }) => field === nextFieldName);
     } else {
-      nextColumnWithOperator = filterableColumns.find(colDef => {
-        var _colDef$filterOperato;
-        return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
-      });
+      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
     }
     if (!nextColumnWithOperator) {
       return null;
     }
     return getGridFilter(nextColumnWithOperator);
-  }, [filterModel == null ? void 0 : filterModel.items, filterableColumns, getColumnForNewFilter]);
+  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
   const getNewFilter = React.useCallback(() => {
     if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
       return getDefaultFilter();
@@ -178,12 +174,12 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: handleRemoveAll,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelRemoveAllIcon, {})
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelRemoveAll')
       })) : null]
     }) : null]

package/components/panel/filterPanel/filterPanelUtils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 export function isSingleSelectColDef(colDef) {
-  return (colDef == null ? void 0 : colDef.type) === 'singleSelect';
+  return colDef?.type === 'singleSelect';
 }
 export function getValueOptions(column, additionalParams) {
   if (!column) {

package/components/toolbar/GridToolbarColumnsButton.js

@@ -9,7 +9,6 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     slotProps = {}
   } = props;
@@ -21,13 +20,12 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   const rootProps = useGridRootProps();
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const showColumns = event => {
-    var _buttonProps$onClick;
     if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
 
   // Disable the button if the corresponding is disabled
@@ -38,7 +36,7 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: columnButtonId,
@@ -50,7 +48,7 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
     }, buttonProps, {
       onClick: showColumns
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+    }, rootProps.slotProps?.baseButton, {
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/components/toolbar/GridToolbarDensitySelector.js

@@ -5,7 +5,7 @@ import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -15,7 +15,6 @@ import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     slotProps = {}
   } = props;
@@ -23,7 +22,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const densityButtonId = useId();
   const densityMenuId = useId();
   const [open, setOpen] = React.useState(false);
@@ -43,7 +42,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     value: 'comfortable'
   }];
   const startIcon = React.useMemo(() => {
-    switch (densityValue) {
+    switch (density) {
       case 'compact':
         return /*#__PURE__*/_jsx(rootProps.slots.densityCompactIcon, {});
       case 'comfortable':
@@ -51,11 +50,10 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       default:
         return /*#__PURE__*/_jsx(rootProps.slots.densityStandardIcon, {});
     }
-  }, [densityValue, rootProps]);
+  }, [density, rootProps]);
   const handleDensitySelectorOpen = event => {
-    var _buttonProps$onClick;
     setOpen(prevOpen => !prevOpen);
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
   const handleDensitySelectorClose = () => {
     setOpen(false);
@@ -79,7 +77,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   }
   const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(MenuItem, {
     onClick: () => handleDensityUpdate(option.value),
-    selected: option.value === densityValue,
+    selected: option.value === density,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: option.icon
     }), option.label]
@@ -88,7 +86,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -100,7 +98,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         id: densityButtonId
       }, buttonProps, {
         onClick: handleDensitySelectorOpen
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

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 || hideMenu();
+      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 || hideMenu();
+      hideMenu?.();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')

package/components/toolbar/GridToolbarExportContainer.js

@@ -11,7 +11,6 @@ import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     children,
     slotProps = {}
@@ -26,9 +25,8 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(ref, buttonRef);
   const handleMenuOpen = event => {
-    var _buttonProps$onClick;
     setOpen(prevOpen => !prevOpen);
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
@@ -46,7 +44,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -58,7 +56,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         id: exportButtonId
       }, buttonProps, {
         onClick: handleMenuOpen
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarFilterButton.js

@@ -34,7 +34,6 @@ const GridToolbarFilterListRoot = styled('ul', {
   padding: theme.spacing(0, 1)
 }));
 const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     slotProps = {}
   } = props;
@@ -77,7 +76,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     });
   }, [apiRef, rootProps, preferencePanel.open, activeFilters, lookup, classes]);
   const toggleFilter = event => {
-    var _buttonProps$onClick;
     const {
       open,
       openedPanelValue
@@ -87,7 +85,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
 
   // Disable the button if the corresponding is disabled
@@ -98,7 +96,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -114,7 +112,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       })
     }, buttonProps, {
       onClick: toggleFilter
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+    }, rootProps.slotProps?.baseButton, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/components/toolbar/GridToolbarQuickFilter.js

@@ -45,7 +45,6 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => 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);
@@ -55,7 +54,7 @@ function GridToolbarQuickFilter(props) {
       debounceMs = rootProps.filterDebounceMs
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
     if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
@@ -63,7 +62,7 @@ function GridToolbarQuickFilter(props) {
       prevQuickFilterValuesRef.current = quickFilterValues;
 
       // Update the input value if needed to match the new model
-      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
     }
   }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
@@ -102,13 +101,13 @@ function GridToolbarQuickFilter(props) {
           visibility: searchValue ? 'visible' : 'hidden'
         },
         onClick: handleSearchReset
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
           fontSize: "small"
         })
       }))
     }, other.InputProps)
-  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTextField));
+  }, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/virtualization/GridVirtualScrollerContent.js

@@ -21,9 +21,8 @@ const VirtualScrollerContentRoot = styled('div', {
   overridesResolver: (props, styles) => styles.virtualScrollerContent
 })({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
-  var _props$style;
   const rootProps = useGridRootProps();
-  const overflowedContent = !rootProps.autoHeight && ((_props$style = props.style) == null ? void 0 : _props$style.minHeight) === 'auto';
+  const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
     ref: ref

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -40,10 +40,9 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const offsetTop = useGridSelector(apiRef, () => {
-    var _rowsMeta$positions$r;
     const renderContext = gridRenderContextSelector(apiRef);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    return (_rowsMeta$positions$r = rowsMeta.positions[renderContext.firstRowIndex]) != null ? _rowsMeta$positions$r : 0;
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -85,7 +85,6 @@ export const useGridStrategyProcessing = apiRef => {
     return processor(params);
   }, [apiRef]);
   const getActiveStrategy = React.useCallback(strategyGroup => {
-    var _availableStrategyEnt;
     const strategyEntries = Array.from(availableStrategies.current.entries());
     const availableStrategyEntry = strategyEntries.find(([, strategy]) => {
       if (strategy.group !== strategyGroup) {
@@ -93,7 +92,7 @@ export const useGridStrategyProcessing = apiRef => {
       }
       return strategy.isAvailable();
     });
-    return (_availableStrategyEnt = availableStrategyEntry == null ? void 0 : availableStrategyEntry[0]) != null ? _availableStrategyEnt : GRID_DEFAULT_STRATEGY;
+    return availableStrategyEntry?.[0] ?? GRID_DEFAULT_STRATEGY;
   }, []);
   const setStrategyAvailability = React.useCallback((strategyGroup, strategyName, isAvailable) => {
     availableStrategies.current.set(strategyName, {

package/hooks/core/useGridApiInitialization.js

@@ -12,8 +12,7 @@ export function unwrapPrivateAPI(publicApi) {
 }
 let globalId = 0;
 function createPrivateAPI(publicApiRef) {
-  var _publicApiRef$current;
-  const existingPrivateApi = (_publicApiRef$current = publicApiRef.current) == null ? void 0 : _publicApiRef$current[SYMBOL_API_PRIVATE];
+  const existingPrivateApi = publicApiRef.current?.[SYMBOL_API_PRIVATE];
   if (existingPrivateApi) {
     return existingPrivateApi;
   }
@@ -31,7 +30,7 @@ function createPrivateAPI(publicApiRef) {
     Object.keys(methods).forEach(methodName => {
       const method = methods[methodName];
       const currentPrivateMethod = privateApi[methodName];
-      if ((currentPrivateMethod == null ? void 0 : currentPrivateMethod.spying) === true) {
+      if (currentPrivateMethod?.spying === true) {
         currentPrivateMethod.target = method;
       } else {
         privateApi[methodName] = method;
@@ -39,7 +38,7 @@ function createPrivateAPI(publicApiRef) {
       if (visibility === 'public') {
         const publicApi = publicApiRef.current;
         const currentPublicMethod = publicApi[methodName];
-        if ((currentPublicMethod == null ? void 0 : currentPublicMethod.spying) === true) {
+        if (currentPublicMethod?.spying === true) {
           currentPublicMethod.target = method;
         } else {
           publicApi[methodName] = method;
@@ -69,7 +68,6 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
-  var _inputApiRef$current;
   const publicApiRef = React.useRef();
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -100,7 +98,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
-  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+  if (inputApiRef && !inputApiRef.current?.state) {
     inputApiRef.current = publicApiRef.current;
   }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);

package/hooks/features/clipboard/useGridClipboard.js

@@ -30,9 +30,8 @@ function copyToClipboard(data) {
   }
 }
 function hasNativeSelection(element) {
-  var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
-  if ((_window$getSelection = window.getSelection()) != null && _window$getSelection.toString()) {
+  if (window.getSelection()?.toString()) {
     return true;
   }
 
@@ -51,7 +50,7 @@ function hasNativeSelection(element) {
  */
 export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
-  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
     if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
@@ -68,7 +67,8 @@ export const useGridClipboard = (apiRef, props) => {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         // TODO: make it configurable
-        delimiter: clipboardCopyCellDelimiter
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
@@ -76,7 +76,8 @@ export const useGridClipboard = (apiRef, props) => {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
           delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter
+          ignoreValueFormatter,
+          shouldAppendQuotes: false
         });
       }
     }

package/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -4,19 +4,7 @@ import { createSelector, createSelectorMemoized } from '../../../utils/createSel
  * @ignore - do not document.
  */
 export const gridColumnGroupingSelector = state => state.columnGrouping;
-export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$unwra;
-  return (_columnGrouping$unwra = columnGrouping == null ? void 0 : columnGrouping.unwrappedGroupingModel) != null ? _columnGrouping$unwra : {};
-});
-export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$looku;
-  return (_columnGrouping$looku = columnGrouping == null ? void 0 : columnGrouping.lookup) != null ? _columnGrouping$looku : {};
-});
-export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$heade;
-  return (_columnGrouping$heade = columnGrouping == null ? void 0 : columnGrouping.headerStructure) != null ? _columnGrouping$heade : [];
-});
-export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$maxDe;
-  return (_columnGrouping$maxDe = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe : 0;
-});
+export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -35,26 +35,22 @@ export const unwrapGroupingColumnModel = columnGroupingModel => {
   return unwrappedSubTree;
 };
 export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
-  const getParents = field => {
-    var _unwrappedGroupingMod;
-    return (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
-  };
+  const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
   const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
   const haveDifferentContainers = (field1, field2) => {
-    if (pinnedFields != null && pinnedFields.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
       return true;
     }
-    if (pinnedFields != null && pinnedFields.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
       return true;
     }
     return false;
   };
   for (let depth = 0; depth < maxDepth; depth += 1) {
     const depthStructure = orderedColumns.reduce((structure, newField) => {
-      var _getParents$depth;
-      const groupId = (_getParents$depth = getParents(newField)[depth]) != null ? _getParents$depth : null;
+      const groupId = getParents(newField)[depth] ?? null;
       if (structure.length === 0) {
         return [{
           columnFields: [newField],