@mui/x-data-grid 5.6.0 → 5.8.0

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,6 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -23,13 +22,15 @@ const useUtilityClasses = ownerState => {
     classes,
     isDragging,
     sortDirection,
-    showRightBorder
+    showRightBorder,
+    filterItemsCounter
   } = ownerState;
-  const isColumnSorted = sortDirection != null; // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
+  const isColumnSorted = sortDirection != null;
+  const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0; // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
 
   const isColumnNumeric = column.type === 'number';
   const slots = {
-    root: ['columnHeader', column.headerAlign === 'left' && 'columnHeader--alignLeft', column.headerAlign === 'center' && 'columnHeader--alignCenter', column.headerAlign === 'right' && 'columnHeader--alignRight', column.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnNumeric && 'columnHeader--numeric', showRightBorder && 'withBorder'],
+    root: ['columnHeader', column.headerAlign === 'left' && 'columnHeader--alignLeft', column.headerAlign === 'center' && 'columnHeader--alignCenter', column.headerAlign === 'right' && 'columnHeader--alignRight', column.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', showRightBorder && 'withBorder'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -38,7 +39,7 @@ const useUtilityClasses = ownerState => {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _column$headerName, _rootProps$components;
+  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
 
   const {
     column,
@@ -142,9 +143,10 @@ function GridColumnHeaderItem(props) {
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -210,7 +212,7 @@ function GridColumnHeaderItem(props) {
       open: columnMenuOpen,
       target: iconButtonRef.current,
       ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
       onExited: handleExited
     })]
   }));

package/components/columnHeaders/GridColumnHeaderTitle.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface GridColumnHeaderTitleProps {
     label: string;
     columnWidth: number;
-    description?: string;
+    description?: React.ReactNode;
 }
 declare function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps): JSX.Element;
 declare namespace GridColumnHeaderTitle {

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   columnWidth: PropTypes.number.isRequired,
-  description: PropTypes.string,
+  description: PropTypes.node,
   label: PropTypes.string.isRequired
 } : void 0;
 export { GridColumnHeaderTitle };

package/components/columnHeaders/GridColumnHeaders.js

@@ -35,7 +35,9 @@ const GridColumnHeadersRoot = styled('div', {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: `1px solid ${borderColor}`
+    borderBottom: `1px solid ${borderColor}`,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius
   };
 });
 export const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {

package/components/columnHeaders/index.d.ts

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/components/columnHeaders/index.js

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -125,7 +125,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -148,7 +148,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams & React.RefAttributes<HTMLInputElement>>;
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<any, import("../../models/gridRows").GridValidRowModel, any> & React.RefAttributes<HTMLInputElement>>;
 export { GridHeaderCheckbox };

package/components/containers/GridOverlay.d.ts

@@ -1,3 +1,10 @@
 import * as React from 'react';
-export declare type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const GridOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+export declare type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridOverlay };

package/components/containers/GridOverlay.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
@@ -33,7 +34,7 @@ const GridOverlayRoot = styled('div', {
   justifyContent: 'center',
   backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
 }));
-export const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   const {
     className
   } = props,
@@ -48,4 +49,12 @@ export const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(pr
     ref: ref,
     className: clsx(classes.root, className)
   }, other));
-});
+});
+process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridOverlay };

package/components/containers/GridRoot.js

@@ -4,8 +4,7 @@ const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef } from '@mui/material/utils';
-import NoSsr from '@mui/material/NoSsr';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -30,21 +29,34 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(GridRootStyles, _extends({
-      ref: handleRef,
-      className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
-      role: "grid",
-      "aria-colcount": visibleColumns.length,
-      "aria-rowcount": totalRowCount,
-      "aria-multiselectable": !rootProps.disableMultipleSelection,
-      "aria-label": rootProps['aria-label'],
-      "aria-labelledby": rootProps['aria-labelledby']
-    }, other, {
-      children: children
-    }))
-  });
+  apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
+
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    setMountedState(true);
+  }, []);
+  useEnhancedEffect(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
+    role: "grid",
+    "aria-colcount": visibleColumns.length,
+    "aria-rowcount": totalRowCount,
+    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-label": rootProps['aria-label'],
+    "aria-labelledby": rootProps['aria-labelledby']
+  }, other, {
+    children: children
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridRootStyles.js

@@ -108,11 +108,11 @@ export const GridRootStyles = styled('div', {
     [`&.${gridClasses.autoHeight}`]: {
       height: 'auto',
       [`& .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
-        borderColor: 'transparent'
+        borderBottomColor: 'transparent'
       }
     },
     [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
-      borderColor: 'transparent'
+      borderBottomColor: 'transparent'
     },
     [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
@@ -138,7 +138,7 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center'
     },
-    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}`]: {
+    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]: {
       visibility: 'visible',
       width: 'auto'
     },

package/components/menu/columnMenu/GridColumnMenu.js

@@ -30,7 +30,7 @@ const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(pro
     onClick: hideMenu,
     column: currentColumn
   })];
-  const preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, props, {

package/components/panel/GridColumnsPanel.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare function GridColumnsPanel(): JSX.Element;
+import { GridPanelWrapperProps } from './GridPanelWrapper';
+export interface GridColumnsPanelProps extends GridPanelWrapperProps {
+}
+export declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;

package/components/panel/GridColumnsPanel.js

@@ -54,7 +54,7 @@ const GridColumnsPanelRowRoot = styled('div', {
 const GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel() {
+export function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   const apiRef = useGridApiContext();
@@ -102,7 +102,7 @@ export function GridColumnsPanel() {
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -155,5 +155,5 @@ export function GridColumnsPanel() {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]
     })]
-  });
+  }));
 }

package/components/panel/GridPanel.d.ts

@@ -5,7 +5,7 @@ import { InternalStandardProps as StandardProps } from '@mui/material';
 import { PopperProps } from '@mui/material/Popper';
 export interface GridPanelClasses {
     /** Styles applied to the root element. */
-    root: string;
+    panel: string;
     /** Styles applied to the paper element. */
     paper: string;
 }
@@ -17,6 +17,6 @@ export interface GridPanelProps extends StandardProps<MUIStyledCommonProps<Theme
     classes?: Partial<GridPanelClasses>;
     open: boolean;
 }
-export declare const gridPanelClasses: Record<"paper" | "panel", string>;
+export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
 declare const GridPanel: React.ForwardRefExoticComponent<Pick<GridPanelProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "children" | "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "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" | "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" | "sx" | "theme" | "classes" | "container" | "disablePortal" | "keepMounted" | "anchorEl" | "placement" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };

package/components/panel/GridPanelWrapper.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { MUIStyledCommonProps } from '@mui/system';
-interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
+export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
 }
 declare function GridPanelWrapper(props: GridPanelWrapperProps): JSX.Element;
 export { GridPanelWrapper };

package/components/panel/GridPreferencesPanel.js

@@ -7,21 +7,19 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4;
+  var _preferencePanelState, _rootProps$components, _rootProps$components2;
 
   const apiRef = useGridApiContext();
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const isColumnsTabOpen = preferencePanelState.openedPanelValue === GridPreferencePanelsValue.columns;
-  const isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
-  return /*#__PURE__*/_jsxs(rootProps.components.Panel, _extends({
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     ref: ref,
     as: rootProps.components.BasePopper,
     open: columns.length > 0 && preferencePanelState.open
   }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.panel, props, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.basePopper, {
-    children: [!rootProps.disableColumnSelector && isColumnsTabOpen && /*#__PURE__*/_jsx(rootProps.components.ColumnsPanel, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/_jsx(rootProps.components.FilterPanel, _extends({}, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.filterPanel))]
+    children: panelContent
   }));
 });

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterItem } from '../../../models/gridFilterItem';
+import type { GridApiCommon } from '../../../models/api/gridApiCommon';
 export declare type GridFilterInputMultipleSingleSelectProps = {
     item: GridFilterItem;
     applyValue: (value: GridFilterItem) => void;
-    apiRef: any;
+    apiRef: React.MutableRefObject<GridApiCommon>;
     focusElementRef?: React.Ref<any>;
     type?: 'singleSelect';
 } & Omit<AutocompleteProps<any[], true, false, true>, 'options' | 'renderInput'>;

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,21 +10,6 @@ import { unstable_useId as useId } from '@mui/material/utils';
 import { getValueFromOption } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const getSingleSelectOptionFormatter = ({
-  valueFormatter,
-  field
-}, api) => option => {
-  if (typeof option === 'object') {
-    return option.label;
-  }
-
-  return valueFormatter && option !== '' ? valueFormatter({
-    value: option,
-    field,
-    api
-  }) : option;
-};
-
 const isOptionEqualToValue = (option, value) => getValueFromOption(option) === getValueFromOption(value);
 
 const filter = createFilterOptions();
@@ -41,15 +26,31 @@ function GridFilterInputMultipleSingleSelect(props) {
   const id = useId();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+    return typeof (resolvedColumn == null ? void 0 : resolvedColumn.valueOptions) === 'function' ? resolvedColumn.valueOptions({
       field: resolvedColumn.field
-    }) : resolvedColumn.valueOptions;
+    }) : resolvedColumn == null ? void 0 : resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
-    return resolvedValueOptions.map(getValueFromOption);
+    return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(getValueFromOption);
   }, [resolvedValueOptions]);
-  const filterValueOptionFormatter = getSingleSelectOptionFormatter(apiRef.current.getColumn(item.columnField), apiRef.current); // The value is computed from the item.value and used directly
-  // If it was done by a useEffect/useSate, the Autocomplete could receive incoherent value and options
+  const {
+    valueFormatter,
+    field
+  } = apiRef.current.getColumn(item.columnField);
+
+  const filterValueOptionFormatter = option => {
+    if (typeof option === 'object') {
+      return option.label;
+    }
+
+    return valueFormatter && option !== '' ? valueFormatter({
+      value: option,
+      field,
+      api: apiRef.current
+    }) : option;
+  }; // The value is computed from the item.value and used directly
+  // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
+
 
   const filterValues = React.useMemo(() => {
     if (!Array.isArray(item.value)) {
@@ -60,7 +61,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       const itemValueIndexes = item.value.map(element => {
         // get the index matching between values and valueoptions
         const formattedElement = getValueFromOption(element);
-        const index = resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement);
+        const index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement)) || 0;
         return index;
       });
       return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
@@ -85,7 +86,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     multiple: true,
     freeSolo: false,
     limitTags: 1,
-    options: resolvedValueOptions,
+    options: resolvedValueOptions // TODO: avoid `any`?
+    ,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -116,7 +118,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -1,2 +1,2 @@
-export declare function getValueFromOption(option: any): any;
-export declare function getValueFromValueOptions(value: any, valueOptions: any): any;
+export declare function getValueFromOption(option: any | undefined): any;
+export declare function getValueFromValueOptions(value: string, valueOptions: any[]): any;

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -24,7 +24,10 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   slot: 'VirtualScrollerRenderZone',
   overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
 })({
-  position: 'absolute'
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {

package/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -49,6 +49,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay,
   Footer: GridFooter,

package/constants/gridClasses.d.ts

@@ -1,4 +1,8 @@
 export interface GridClasses {
+    /**
+     * Styles applied to the root element of the cell with type="actions"
+     */
+    actionsCell: string;
     /**
      * Styles applied to the root element if `autoHeight={true}`.
      */
@@ -79,6 +83,10 @@ export interface GridClasses {
      * Styles applied to the column header if the column is sorted.
      */
     'columnHeader--sorted': string;
+    /**
+     * Styles applied to the column header if the column has a filter applied to it.
+     */
+    'columnHeader--filtered': string;
     /**
      * Styles applied to the column header element.
      */
@@ -361,14 +369,22 @@ export interface GridClasses {
      */
     withBorder: string;
     /**
-     * Styles applied to the root of the grouping column of the tree data.
+     * Styles applied to the root of the grouping cell of the tree data.
      */
     treeDataGroupingCell: string;
     /**
-     * Styles applied to the toggle of the grouping column of the tree data.
+     * Styles applied to the toggle of the grouping cell of the tree data.
      */
     treeDataGroupingCellToggle: string;
+    /**
+     * Styles applied to the root element of the grouping criteria cell
+     */
+    groupingCriteriaCell: string;
+    /**
+     * Styles applied to the toggle of the grouping criteria cell
+     */
+    groupingCriteriaCellToggle: string;
 }
 export declare type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;
-export declare const gridClasses: Record<"overlay" | "cell" | "row" | "menu" | "main" | "root" | "paper" | "autoHeight" | "booleanCell" | "cell--editable" | "cell--editing" | "cell--textCenter" | "cell--textLeft" | "cell--textRight" | "cell--withRenderer" | "cellContent" | "cellCheckbox" | "checkboxInput" | "columnHeader--alignCenter" | "columnHeader--alignLeft" | "columnHeader--alignRight" | "columnHeader--dragging" | "columnHeader--moving" | "columnHeader--numeric" | "columnHeader--sortable" | "columnHeader--sorted" | "columnHeader" | "columnHeaderCheckbox" | "columnHeaderDraggableContainer" | "columnHeaderDropZone" | "columnHeaderTitle" | "columnHeaderTitleContainer" | "columnHeaderTitleContainerContent" | "columnHeaders" | "columnHeadersInner" | "columnHeadersInner--scrollable" | "columnSeparator--resizable" | "columnSeparator--resizing" | "columnSeparator--sideLeft" | "columnSeparator--sideRight" | "columnSeparator" | "columnsPanel" | "columnsPanelRow" | "detailPanel" | "detailPanels" | "detailPanelToggleCell" | "detailPanelToggleCell--expanded" | "panel" | "panelHeader" | "panelWrapper" | "panelContent" | "panelFooter" | "editBooleanCell" | "filterForm" | "filterFormDeleteIcon" | "filterFormLinkOperatorInput" | "filterFormColumnInput" | "filterFormOperatorInput" | "filterFormValueInput" | "editInputCell" | "filterIcon" | "footerContainer" | "iconButtonContainer" | "iconSeparator" | "menuIcon" | "menuIconButton" | "menuOpen" | "menuList" | "virtualScroller" | "virtualScrollerContent" | "virtualScrollerContent--overflowed" | "virtualScrollerRenderZone" | "pinnedColumns" | "pinnedColumns--left" | "pinnedColumns--right" | "pinnedColumnHeaders" | "pinnedColumnHeaders--left" | "pinnedColumnHeaders--right" | "row--editable" | "row--editing" | "row--lastVisible" | "rowCount" | "scrollArea" | "scrollArea--left" | "scrollArea--right" | "selectedRowCount" | "sortIcon" | "toolbarContainer" | "toolbarFilterList" | "withBorder" | "treeDataGroupingCell" | "treeDataGroupingCellToggle" | "actionsCell" | "groupingCriteriaCell" | "groupingCriteriaCellToggle", string>;
+export declare const gridClasses: Record<keyof GridClasses, string>;

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/context/GridContextProvider.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
-export declare const GridContextProvider: ({ apiRef, props, children }: {
-    apiRef: any;
-    props: any;
-    children: any;
-}) => JSX.Element;
+import * as React from 'react';
+import { GridApiCommunity } from '../models/api/gridApiCommunity';
+declare type GridContextProviderProps = {
+    apiRef: React.MutableRefObject<GridApiCommunity>;
+    props: {};
+    children: React.ReactNode;
+};
+export declare const GridContextProvider: ({ apiRef, props, children }: GridContextProviderProps) => JSX.Element;
+export {};

package/hooks/core/index.d.ts

@@ -1 +1 @@
-export type { GridPreProcessingGroupLookup } from './preProcessing';
+export type { GridPipeProcessingLookup } from './pipeProcessing';