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

package/components/columnsManagement/GridColumnsManagement.js

@@ -28,7 +28,6 @@ const useUtilityClasses = ownerState => {
 };
 const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
-  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
@@ -132,27 +131,24 @@ function GridColumnsManagement(props) {
           }
         },
         fullWidth: true
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
+      }, rootProps.slotProps?.baseTextField))
     }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
-      children: [currentColumns.map(column => {
-        var _rootProps$slotProps2;
-        return /*#__PURE__*/_jsx(FormControlLabel, {
-          className: classes.row,
-          control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-            disabled: column.hideable === false,
-            checked: columnVisibilityModel[column.field] !== false,
-            onClick: toggleColumn,
-            name: column.field,
-            sx: {
-              p: 0.5
-            },
-            inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-          }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseCheckbox)),
-          label: column.headerName || column.field
-        }, column.field);
-      }), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+      children: [currentColumns.map(column => /*#__PURE__*/_jsx(FormControlLabel, {
+        className: classes.row,
+        control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+          disabled: column.hideable === false,
+          checked: columnVisibilityModel[column.field] !== false,
+          onClick: toggleColumn,
+          name: column.field,
+          sx: {
+            p: 0.5
+          },
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
+        }, rootProps.slotProps?.baseCheckbox)),
+        label: column.headerName || column.field
+      }, column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
         ownerState: rootProps,
         children: apiRef.current.getLocaleText('columnsManagementNoColumns')
       })]
@@ -169,12 +165,12 @@ function GridColumnsManagement(props) {
           sx: {
             p: 0.5
           }
-        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
+        }, rootProps.slotProps?.baseCheckbox)),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
       }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
         disabled: isResetDisabled
-      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: "Reset"
       })) : null]
     }) : null]

package/components/containers/GridRoot.js

@@ -11,7 +11,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -39,11 +39,11 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
-  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
   const handleRef = useForkRef(rootElementRef, ref);
   const ownerState = _extends({}, rootProps, {
-    density: densityValue
+    density
   });
   const classes = useUtilityClasses(ownerState);
 

package/components/menu/GridMenu.js

@@ -40,7 +40,6 @@ const transformOrigin = {
   'bottom-end': 'top right'
 };
 function GridMenu(props) {
-  var _rootProps$slotProps;
   const {
       open,
       target,
@@ -59,8 +58,7 @@ function GridMenu(props) {
     if (open) {
       savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     } else {
-      var _savedFocusRef$curren, _savedFocusRef$curren2;
-      (_savedFocusRef$curren = savedFocusRef.current) == null || (_savedFocusRef$curren2 = _savedFocusRef$curren.focus) == null || _savedFocusRef$curren2.call(_savedFocusRef$curren);
+      savedFocusRef.current?.focus?.();
       savedFocusRef.current = null;
     }
   }, [open]);
@@ -80,7 +78,7 @@ function GridMenu(props) {
     }
   };
   const handleClickAway = event => {
-    if (event.target && (target === event.target || target != null && target.contains(event.target))) {
+    if (event.target && (target === event.target || target?.contains(event.target))) {
       return;
     }
     onClose(event);
@@ -93,7 +91,7 @@ function GridMenu(props) {
     anchorEl: target,
     transition: true,
     placement: position
-  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.basePopper, {
+  }, other, rootProps.slotProps?.basePopper, {
     children: ({
       TransitionProps,
       placement
@@ -104,7 +102,7 @@ function GridMenu(props) {
         style: {
           transformOrigin: transformOrigin[placement]
         },
-        onExited: handleExited(TransitionProps == null ? void 0 : TransitionProps.onExited),
+        onExited: handleExited(TransitionProps?.onExited),
         children: /*#__PURE__*/_jsx(Paper, {
           children: children
         })

package/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -21,7 +21,7 @@ function GridColumnHeaderMenu({
     if (event) {
       // Prevent triggering the sorting
       event.stopPropagation();
-      if (target != null && target.contains(event.target)) {
+      if (target?.contains(event.target)) {
         return;
       }
     }

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -10,7 +10,6 @@ import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuSortItem(props) {
-  var _colDef$sortingOrder;
   const {
     colDef,
     onClick
@@ -23,9 +22,9 @@ function GridColumnMenuSortItem(props) {
       return null;
     }
     const sortItem = sortModel.find(item => item.field === colDef.field);
-    return sortItem == null ? void 0 : sortItem.sort;
+    return sortItem?.sort;
   }, [colDef, sortModel]);
-  const sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _colDef$sortingOrder : rootProps.sortingOrder;
+  const sortingOrder = colDef.sortingOrder ?? rootProps.sortingOrder;
   const onSortMenuItemClick = React.useCallback(event => {
     onClick(event);
     const direction = event.currentTarget.getAttribute('data-value') || null;

package/components/panel/GridColumnsPanel.js

@@ -6,10 +6,9 @@ import { GridColumnsManagement } from '../columnsManagement';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
-  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
-    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnsManagement))
+    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/components/panel/GridPanel.d.ts

@@ -16,16 +16,7 @@ export interface GridPanelProps extends Partial<React.ComponentProps<typeof Grid
     open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit<import("@mui/base").PopperProps, "direction"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    components?: {
-        Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    } | undefined;
-    componentsProps?: {
-        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
-    } | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "slotProps" | "slots" | "placement" | "disablePortal" | "keepMounted" | "modifiers" | "anchorEl" | "popperOptions" | "popperRef" | "componentsProps" | keyof React.RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Popper").PopperProps & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "slotProps" | "slots" | "placement" | "disablePortal" | "keepMounted" | "modifiers" | "anchorEl" | "popperOptions" | "popperRef" | "componentsProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
 declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/panel/GridPanel.js

@@ -69,8 +69,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   }], []);
   const [anchorEl, setAnchorEl] = React.useState(null);
   React.useEffect(() => {
-    var _apiRef$current$rootE;
-    const panelAnchor = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector('[data-id="gridPanelAnchor"]');
+    const panelAnchor = apiRef.current.rootElementRef?.current?.querySelector('[data-id="gridPanelAnchor"]');
     if (panelAnchor) {
       setAnchorEl(panelAnchor);
     }

package/components/panel/GridPreferencesPanel.js

@@ -8,19 +8,18 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
-  var _preferencePanelState, _rootProps$slotProps, _rootProps$slotProps2;
   const apiRef = useGridApiContext();
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
   return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
     ref: ref,
     as: rootProps.slots.basePopper,
     open: columns.length > 0 && preferencePanelState.open,
     id: preferencePanelState.panelId,
     "aria-labelledby": preferencePanelState.labelId
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.panel, props, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.basePopper, {
+  }, rootProps.slotProps?.panel, props, rootProps.slotProps?.basePopper, {
     children: panelContent
   }));
 });

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