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

package/components/panel/filterPanel/GridFilterForm.js

@@ -97,7 +97,6 @@ const getLogicOperatorLocaleKey = logicOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
 const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
-  var _filterModel$logicOpe, _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
   const {
       item,
       hasMultipleFilters,
@@ -130,13 +129,13 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
-  const multiFilterOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : GridLogicOperator.And;
+  const multiFilterOperator = filterModel.logicOperator ?? GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
-  const baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
-  const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
-  const baseInputLabelProps = ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel) || {};
-  const baseSelectOptionProps = ((_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption) || {};
+  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
+  const isBaseSelectNative = baseSelectProps.native ?? false;
+  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
@@ -164,7 +163,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     const filteredFields = filterColumns({
       field: item.field,
       columns: filterableColumns,
-      currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
+      currentFilters: filterModel?.items || []
     });
     return {
       filteredColumns: filterableColumns.filter(column => {
@@ -176,7 +175,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       }),
       selectedField: itemField
     };
-  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field, columnLookup]);
+  }, [filterColumns, filterModel?.items, filterableColumns, item.field, columnLookup]);
   const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -189,11 +188,10 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   }, [filteredColumns, columnsSort]);
   const currentColumn = item.field ? apiRef.current.getColumn(item.field) : null;
   const currentOperator = React.useMemo(() => {
-    var _currentColumn$filter;
     if (!item.operator || !currentColumn) {
       return null;
     }
-    return (_currentColumn$filter = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter.find(operator => operator.value === item.operator);
+    return currentColumn.filterOperators?.find(operator => operator.value === item.operator);
   }, [item, currentColumn]);
   const changeColumn = React.useCallback(event => {
     const field = event.target.value;
@@ -207,7 +205,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
 
     // Erase filter value if the input component or filtered column type is modified
-    const eraseFilterValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
+    const eraseFilterValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
     let filterValue = eraseFilterValue ? undefined : item.value;
 
     // Check filter value against the new valueOptions
@@ -218,10 +216,10 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         filterValue = filterValue.filter(val => {
           return (
             // Only keep values that are in the new value options
-            getValueFromValueOptions(val, valueOptions, colDef == null ? void 0 : colDef.getOptionValue) !== undefined
+            getValueFromValueOptions(val, valueOptions, colDef?.getOptionValue) !== undefined
           );
         });
-      } else if (getValueFromValueOptions(item.value, valueOptions, colDef == null ? void 0 : colDef.getOptionValue) === undefined) {
+      } else if (getValueFromValueOptions(item.value, valueOptions, colDef?.getOptionValue) === undefined) {
         // Reset the filter value if it is not in the new value options
         filterValue = undefined;
       }
@@ -234,8 +232,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   }, [apiRef, applyFilterChanges, item, currentColumn, currentOperator]);
   const changeOperator = React.useCallback(event => {
     const operator = event.target.value;
-    const newOperator = currentColumn == null ? void 0 : currentColumn.filterOperators.find(op => op.value === operator);
-    const eraseItemValue = !(newOperator != null && newOperator.InputComponent) || (newOperator == null ? void 0 : newOperator.InputComponent) !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    const newOperator = currentColumn?.filterOperators.find(op => op.value === operator);
+    const eraseItemValue = !newOperator?.InputComponent || newOperator?.InputComponent !== currentOperator?.InputComponent;
     applyFilterChanges(_extends({}, item, {
       operator,
       value: eraseItemValue ? undefined : item.value
@@ -261,9 +259,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   };
   React.useImperativeHandle(focusElementRef, () => ({
     focus: () => {
-      if (currentOperator != null && currentOperator.InputComponent) {
-        var _valueRef$current;
-        valueRef == null || (_valueRef$current = valueRef.current) == null || _valueRef$current.focus();
+      if (currentOperator?.InputComponent) {
+        valueRef?.current?.focus();
       } else {
         filterSelectorRef.current.focus();
       }
@@ -287,7 +284,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onClick: handleDeleteFilter,
         size: "small",
         disabled: readOnly
-      }, (_rootProps$slotProps5 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps5.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
         })
@@ -306,11 +303,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
-        value: multiFilterOperator != null ? multiFilterOperator : '',
+        value: multiFilterOperator ?? '',
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
-      }, (_rootProps$slotProps6 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps6.baseSelect, {
+      }, rootProps.slotProps?.baseSelect, {
         children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
           key: logicOperator.toString(),
@@ -331,11 +328,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
-        value: selectedField != null ? selectedField : '',
+        value: selectedField ?? '',
         onChange: changeColumn,
         native: isBaseSelectNative,
         disabled: readOnly
-      }, (_rootProps$slotProps7 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps7.baseSelect, {
+      }, rootProps.slotProps?.baseSelect, {
         children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
           key: col.field,
@@ -361,8 +358,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         native: isBaseSelectNative,
         inputRef: filterSelectorRef,
         disabled: readOnly
-      }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
-        children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      }, rootProps.slotProps?.baseSelect, {
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
           key: operator.value,
           value: operator.value
@@ -374,7 +371,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     }, baseFormControlProps, valueInputPropsOther, {
       className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       ownerState: rootProps,
-      children: currentOperator != null && currentOperator.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
+      children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,

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

@@ -5,7 +5,7 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldP
     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/GridFilterInputBoolean.js

@@ -17,7 +17,6 @@ const BooleanOperatorContainer = styled('div')({
   }
 });
 function GridFilterInputBoolean(props) {
-  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   const {
       item,
       applyValue,
@@ -33,9 +32,9 @@ function GridFilterInputBoolean(props) {
   const rootProps = useGridRootProps();
   const labelId = useId();
   const selectId = useId();
-  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
-  const baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? false;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -46,11 +45,11 @@ function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
       fullWidth: true,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
         variant: variant,
@@ -100,7 +99,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   focusElementRef: refType,
   /**
    * 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/GridFilterInputDate.d.ts

@@ -6,7 +6,7 @@ export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProp
     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/GridFilterInputDate.js

@@ -25,7 +25,6 @@ function convertFilterItemValueToInputValue(itemValue, inputType) {
   return dateCopy.toISOString().substring(0, 10);
 }
 function GridFilterInputDate(props) {
-  var _rootProps$slotProps;
   const {
       item,
       applyValue,
@@ -83,9 +82,9 @@ function GridFilterInputDate(props) {
       inputProps: _extends({
         max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
         tabIndex
-      }, InputProps == null ? void 0 : InputProps.inputProps)
+      }, InputProps?.inputProps)
     })
-  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField));
+  }, other, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -100,7 +99,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.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/GridFilterInputMultipleSingleSelect.js

@@ -10,7 +10,6 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const filter = createFilterOptions();
 function GridFilterInputMultipleSingleSelect(props) {
-  var _resolvedColumn, _resolvedColumn2;
   const {
       item,
       applyValue,
@@ -39,8 +38,8 @@ function GridFilterInputMultipleSingleSelect(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 isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
   const resolvedValueOptions = React.useMemo(() => {
     return getValueOptions(resolvedColumn) || [];
@@ -81,18 +80,15 @@ function GridFilterInputMultipleSingleSelect(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => {
-      var _rootProps$slotProps;
-      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        InputLabelProps: _extends({}, params.InputLabelProps, {
-          shrink: true
-        }),
-        inputRef: focusElementRef,
-        type: "singleSelect"
-      }, TextFieldProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField));
-    }
+    renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      InputLabelProps: _extends({}, params.InputLabelProps, {
+        shrink: true
+      }),
+      inputRef: focusElementRef,
+      type: "singleSelect"
+    }, TextFieldProps, rootProps.slotProps?.baseTextField))
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.propTypes = {

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -32,8 +32,7 @@ function GridFilterInputMultipleValue(props) {
   const id = useId();
   const rootProps = useGridRootProps();
   React.useEffect(() => {
-    var _item$value;
-    const itemValue = (_item$value = item.value) != null ? _item$value : [];
+    const itemValue = item.value ?? [];
     setFilterValueState(itemValue.map(String));
   }, [item.value]);
   const handleChange = React.useCallback((event, value) => {
@@ -62,18 +61,15 @@ function GridFilterInputMultipleValue(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => {
-      var _rootProps$slotProps;
-      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        InputLabelProps: _extends({}, params.InputLabelProps, {
-          shrink: true
-        }),
-        inputRef: focusElementRef,
-        type: type || 'text'
-      }, TextFieldProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField));
-    }
+    renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      InputLabelProps: _extends({}, params.InputLabelProps, {
+        shrink: true
+      }),
+      inputRef: focusElementRef,
+      type: type || 'text'
+    }, TextFieldProps, rootProps.slotProps?.baseTextField))
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {

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

@@ -5,7 +5,7 @@ export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & TextF
     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;
     type?: 'singleSelect';

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')
     }))
   }));