@mui/x-data-grid 5.15.2 → 5.17.0

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
-import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
-import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -38,7 +36,7 @@ const useUtilityClasses = ownerState => {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
+  var _apiRef$current$getRo, _rootProps$components, _column$sortingOrder, _rootProps$components2, _column$headerName;
 
   const {
     column,
@@ -71,12 +69,21 @@ function GridColumnHeaderItem(props) {
     hasScrollY: false
   };
   const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
-  let headerComponent = null;
+  let headerComponent;
 
   if (column.renderHeader) {
     headerComponent = column.renderHeader(apiRef.current.getColumnHeaderParams(column.field));
   }
 
+  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder
+  });
+
+  const classes = useUtilityClasses(ownerState);
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
@@ -86,7 +93,7 @@ function GridColumnHeaderItem(props) {
 
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
   }, [apiRef, column.field]);
-  const mouseEventsHandlers = {
+  const mouseEventsHandlers = React.useMemo(() => ({
     onClick: publish('columnHeaderClick'),
     onDoubleClick: publish('columnHeaderDoubleClick'),
     onMouseOver: publish('columnHeaderOver'),
@@ -100,29 +107,16 @@ function GridColumnHeaderItem(props) {
     onKeyDown: publish('columnHeaderKeyDown'),
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
-  };
-  const draggableEventHandlers = isDraggable ? {
+  }), [publish]);
+  const draggableEventHandlers = React.useMemo(() => isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  } : null;
-  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
-
-  const ownerState = _extends({}, props, {
-    classes: rootProps.classes,
-    showRightBorder
-  });
-
-  const classes = useUtilityClasses(ownerState);
-  const width = column.computedWidth;
-  let ariaSort = 'none';
-
-  if (sortDirection != null) {
-    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
-  }
-
+  } : {}, [isDraggable, publish]);
+  const columnHeaderSeparatorProps = React.useMemo(() => ({
+    onMouseDown: publish('columnSeparatorMouseDown')
+  }), [publish]);
   React.useEffect(() => {
     if (!showColumnMenuIcon) {
       setShowColumnMenuIcon(columnMenuOpen);
@@ -140,13 +134,24 @@ function GridColumnHeaderItem(props) {
     iconButtonRef: iconButtonRef
   });
 
+  const columnMenu = /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    field: column.field,
+    open: columnMenuOpen,
+    target: iconButtonRef.current,
+    ContentComponent: rootProps.components.ColumnMenu,
+    contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+    onExited: handleExited
+  });
+
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
       field: column.field,
       counter: filterItemsCounter
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -168,53 +173,32 @@ function GridColumnHeaderItem(props) {
     colDef: column
   }) : column.headerClassName;
   const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
-  return /*#__PURE__*/_jsxs("div", _extends({
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
     ref: headerCellRef,
-    className: clsx(classes.root, headerClassName),
-    "data-field": column.field,
-    style: {
-      width,
-      minWidth: width,
-      maxWidth: width
-    },
-    role: "columnheader",
+    classes: classes,
+    columnMenuOpen: columnMenuOpen,
+    colIndex: colIndex,
+    height: headerHeight,
+    isResizing: isResizing,
+    sortDirection: sortDirection,
+    hasFocus: hasFocus,
     tabIndex: tabIndex,
-    "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
-  }, mouseEventsHandlers, {
-    children: [/*#__PURE__*/_jsxs("div", _extends({
-      className: classes.draggableContainer,
-      draggable: isDraggable
-    }, draggableEventHandlers, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: classes.titleContainer,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.titleContainerContent,
-          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: label,
-            description: column.description,
-            columnWidth: width
-          })
-        }), columnTitleIconButtons]
-      }), columnMenuIconButton]
-    })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, {
-      resizable: !rootProps.disableColumnResize && !!column.resizable,
-      resizing: isResizing,
-      height: headerHeight,
-      onMouseDown: publish('columnSeparatorMouseDown'),
-      side: separatorSide
-    }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
-      columnMenuId: columnMenuId,
-      columnMenuButtonId: columnMenuButtonId,
-      field: column.field,
-      open: columnMenuOpen,
-      target: iconButtonRef.current,
-      ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
-      onExited: handleExited
-    })]
-  }));
+    separatorSide: separatorSide,
+    isDraggable: isDraggable,
+    headerComponent: headerComponent,
+    description: column.description,
+    elementId: column.field,
+    width: column.computedWidth,
+    columnMenuIconButton: columnMenuIconButton,
+    columnTitleIconButtons: columnTitleIconButtons,
+    headerClassName: headerClassName,
+    label: label,
+    resizable: !rootProps.disableColumnResize && !!column.resizable,
+    "data-field": column.field,
+    columnMenu: columnMenu,
+    draggableContainerProps: draggableEventHandlers,
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+  }, mouseEventsHandlers));
 }
 
 process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {

package/components/columnHeaders/GridColumnHeadersInner.js

@@ -30,7 +30,8 @@ const GridColumnHeadersInnerRoot = styled('div', {
   }, styles.columnHeadersInner]
 })(() => ({
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
   [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
     cursor: 'move'
   },

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
+import { GridSortDirection } from '../../models/gridSortModel';
+import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
+import { GridColumnGroup } from '../../models/gridColumnGrouping';
+interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
+    classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;
+    colIndex: number;
+    columnMenuOpen: boolean;
+    height: number;
+    isResizing: boolean;
+    sortDirection: GridSortDirection;
+    sortIndex?: number;
+    filterItemsCounter?: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
+    disableReorder?: boolean;
+    separatorSide?: GridColumnHeaderSeparatorProps['side'];
+    headerComponent?: React.ReactNode;
+    elementId: GridStateColDef['field'] | GridColumnGroup['groupId'];
+    isDraggable: boolean;
+    width: number;
+    columnMenuIconButton?: React.ReactNode;
+    columnMenu?: React.ReactNode;
+    columnTitleIconButtons?: React.ReactNode;
+    label: string;
+    draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
+    columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;
+    disableHeaderSeparator?: boolean;
+}
+declare const GridGenericColumnHeaderItem: React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps & React.RefAttributes<unknown>>;
+export { GridGenericColumnHeaderItem };

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "disableHeaderSeparator"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { useForkRef } from '@mui/material/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
+import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+  const {
+    classes,
+    columnMenuOpen,
+    colIndex,
+    height,
+    isResizing,
+    sortDirection,
+    hasFocus,
+    tabIndex,
+    separatorSide,
+    isDraggable,
+    headerComponent,
+    description,
+    width,
+    columnMenuIconButton = null,
+    columnMenu = null,
+    columnTitleIconButtons = null,
+    headerClassName,
+    label,
+    resizable,
+    draggableContainerProps,
+    columnHeaderSeparatorProps,
+    disableHeaderSeparator
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const headerCellRef = React.useRef(null);
+  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const handleRef = useForkRef(headerCellRef, ref);
+  let ariaSort = 'none';
+
+  if (sortDirection != null) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+
+  React.useEffect(() => {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  React.useLayoutEffect(() => {
+    const columnMenuState = apiRef.current.state.columnMenu;
+
+    if (hasFocus && !columnMenuState.open) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [apiRef, hasFocus]);
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: handleRef,
+    className: clsx(classes.root, headerClassName),
+    style: {
+      height,
+      width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    tabIndex: tabIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-sort": ariaSort,
+    "aria-label": headerComponent == null ? label : undefined
+  }, other, {
+    children: [/*#__PURE__*/_jsxs("div", _extends({
+      className: classes.draggableContainer,
+      draggable: isDraggable
+    }, draggableContainerProps, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.titleContainer,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
+            description: description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), !disableHeaderSeparator && /*#__PURE__*/_jsx(GridColumnHeaderSeparator, _extends({
+      resizable: !rootProps.disableColumnResize && !!resizable,
+      resizing: isResizing,
+      height: height,
+      side: separatorSide
+    }, columnHeaderSeparatorProps)), columnMenu]
+  }));
+});
+export { GridGenericColumnHeaderItem };

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -187,7 +187,8 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/components/containers/GridOverlay.js

@@ -27,8 +27,14 @@ const GridOverlayRoot = styled('div', {
 })(({
   theme
 }) => ({
-  display: 'flex',
+  position: 'absolute',
+  top: 0,
+  zIndex: 4,
+  // should be above pinned columns, pinned rows and detail panel
+  width: '100%',
   height: '100%',
+  pointerEvents: 'none',
+  display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',

package/components/containers/GridRoot.js

@@ -12,8 +12,8 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridDensityHeaderGroupingMaxDepthSelector, gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -41,6 +41,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
@@ -71,8 +72,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     className: clsx(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
-    "aria-rowcount": totalRowCount + pinnedRowsCount + 1 // +1 for the header row
-    ,
+    "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
     "aria-multiselectable": !rootProps.disableMultipleSelection,
     "aria-label": rootProps['aria-label'],
     "aria-labelledby": rootProps['aria-labelledby']

package/components/containers/GridRootStyles.js

@@ -35,6 +35,8 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses.cellContent}`]: styles.cellContent
   }, {
     [`& .${gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${gridClasses.checkboxInput}`]: styles.checkboxInput
   }, {
@@ -175,13 +177,24 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflowX: 'hidden'
+      overflow: 'hidden'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
       display: 'flex',
       alignItems: 'center'
     },
+    [`& .${gridClasses['columnHeader--filledGroup']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      borderBottom: `solid ${borderColor} 1px`,
+      boxSizing: 'border-box'
+    },
+    [`& .${gridClasses['columnHeader--filledGroup']}.${gridClasses['columnHeader--showColumnBorder']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      borderBottom: `none`
+    },
+    [`& .${gridClasses['columnHeader--filledGroup']}.${gridClasses['columnHeader--showColumnBorder']}`]: {
+      borderBottom: `solid ${borderColor} 1px`,
+      boxSizing: 'border-box'
+    },
     [`& .${gridClasses.sortIcon}, & .${gridClasses.filterIcon}`]: {
       fontSize: 'inherit'
     },
@@ -361,7 +374,8 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',
-      width: '100%'
+      width: '100%',
+      height: '100%'
     },
     [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
       display: 'none'

package/components/menu/GridMenu.d.ts

@@ -3,12 +3,13 @@ import { ClickAwayListenerProps } from '@mui/material/ClickAwayListener';
 import { GrowProps } from '@mui/material/Grow';
 import { PopperProps } from '@mui/material/Popper';
 declare type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | undefined;
-export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown'> {
+export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
     open: boolean;
-    target: React.ReactNode;
+    target: HTMLElement | null;
     onClickAway: ClickAwayListenerProps['onClickAway'];
     position?: MenuPosition;
     onExited?: GrowProps['onExited'];
+    children: React.ReactNode;
 }
 declare const GridMenu: {
     (props: GridMenuProps): JSX.Element;

package/components/menu/GridMenu.js

@@ -121,6 +121,7 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
   onClickAway: PropTypes.func.isRequired,
   onExited: PropTypes.func,
 

package/components/menu/columnMenu/GridColumnHeaderMenu.d.ts

@@ -7,7 +7,7 @@ export interface GridColumnHeaderMenuProps {
     contentComponentProps?: any;
     field: string;
     open: boolean;
-    target: Element | null;
+    target: HTMLElement | null;
     onExited?: GridMenuProps['onExited'];
 }
 declare function GridColumnHeaderMenu({ columnMenuId, columnMenuButtonId, ContentComponent, contentComponentProps, field, open, target, onExited, }: GridColumnHeaderMenuProps): JSX.Element | null;

package/components/panel/GridColumnsPanel.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
 import { GridPanelWrapperProps } from './GridPanelWrapper';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
+    sort?: 'asc' | 'desc';
 }
-export declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
+declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
+declare namespace GridColumnsPanel {
+    var propTypes: any;
+}
+export { GridColumnsPanel };

package/components/panel/GridColumnsPanel.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["sort"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { switchClasses } from '@mui/material/Switch';
@@ -54,7 +57,9 @@ const GridColumnsPanelRowRoot = styled('div', {
 const GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel(props) {
+const collator = new Intl.Collator();
+
+function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   const apiRef = useGridApiContext();
@@ -68,6 +73,24 @@ export function GridColumnsPanel(props) {
   };
   const classes = useUtilityClasses(ownerState);
 
+  const {
+    sort
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+
   const toggleColumn = event => {
     const {
       name: field
@@ -101,16 +124,16 @@ export function GridColumnsPanel(props) {
   }, []);
   const currentColumns = React.useMemo(() => {
     if (!searchValue) {
-      return columns;
+      return sortedColumns;
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return columns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [columns, searchValue]);
+    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
+  }, [sortedColumns, searchValue]);
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -161,4 +184,13 @@ export function GridColumnsPanel(props) {
       }))]
     })]
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sort: PropTypes.oneOf(['asc', 'desc'])
+} : void 0;
+export { GridColumnsPanel };

package/components/panel/GridPanel.d.ts

@@ -18,5 +18,5 @@ export interface GridPanelProps extends StandardProps<MUIStyledCommonProps<Theme
     open: boolean;
 }
 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" | "placement" | "anchorEl" | "container" | "disablePortal" | "keepMounted" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
+declare const GridPanel: React.ForwardRefExoticComponent<Pick<GridPanelProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "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" | "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" | "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" | "theme" | "classes" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "componentsProps" | "keepMounted" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };

package/components/panel/GridPanel.js

@@ -98,6 +98,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
 
   /**
    * Override or extend the styles applied to the component.

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

@@ -77,6 +77,10 @@ export interface GridFilterFormProps {
      * @default {}
      */
     valueInputProps?: any;
+    /**
+     * @ignore - do not document.
+     */
+    children?: React.ReactNode;
 }
 declare const GridFilterForm: React.ForwardRefExoticComponent<GridFilterFormProps & React.RefAttributes<HTMLDivElement>>;
 export { GridFilterForm };

package/components/panel/filterPanel/GridFilterForm.js

@@ -351,6 +351,11 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
 
+  /**
+   * @ignore - do not document.
+   */
+  children: PropTypes.node,
+
   /**
    * Props passed to the column input component.
    * @default {}