@mui/x-data-grid 5.4.0 → 5.6.0

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -0,0 +1,238 @@
+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 { GridEvents } from '../../models/events';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    column,
+    classes,
+    isDragging,
+    sortDirection,
+    showRightBorder
+  } = ownerState;
+  const isColumnSorted = sortDirection != null; // 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'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridColumnHeaderItem(props) {
+  const {
+    column,
+    columnMenuOpen,
+    colIndex,
+    headerHeight,
+    isResizing,
+    isLastColumn,
+    sortDirection,
+    sortIndex,
+    filterItemsCounter,
+    hasFocus,
+    tabIndex,
+    extendRowFullWidth,
+    disableReorder,
+    separatorSide
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const headerCellRef = React.useRef(null);
+  const columnMenuId = useId();
+  const columnMenuButtonId = useId();
+  const iconButtonRef = React.useRef(null);
+  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const {
+    hasScrollX,
+    hasScrollY
+  } = apiRef.current.getRootDimensions() ?? {
+    hasScrollX: false,
+    hasScrollY: false
+  };
+  let headerComponent = null;
+
+  if (column.renderHeader) {
+    headerComponent = column.renderHeader(apiRef.current.getColumnHeaderParams(column.field));
+  }
+
+  const publish = React.useCallback(eventName => event => {
+    // Ignore portal
+    // See https://github.com/mui/mui-x/issues/1721
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    }
+
+    apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
+  }, [apiRef, column.field]);
+  const mouseEventsHandlers = {
+    onClick: publish(GridEvents.columnHeaderClick),
+    onDoubleClick: publish(GridEvents.columnHeaderDoubleClick),
+    onMouseOver: publish(GridEvents.columnHeaderOver),
+    // TODO remove as it's not used
+    onMouseOut: publish(GridEvents.columnHeaderOut),
+    // TODO remove as it's not used
+    onMouseEnter: publish(GridEvents.columnHeaderEnter),
+    // TODO remove as it's not used
+    onMouseLeave: publish(GridEvents.columnHeaderLeave),
+    // TODO remove as it's not used
+    onKeyDown: publish(GridEvents.columnHeaderKeyDown),
+    onFocus: publish(GridEvents.columnHeaderFocus),
+    onBlur: publish(GridEvents.columnHeaderBlur)
+  };
+  const draggableEventHandlers = {
+    onDragStart: publish(GridEvents.columnHeaderDragStart),
+    onDragEnter: publish(GridEvents.columnHeaderDragEnter),
+    onDragOver: publish(GridEvents.columnHeaderDragOver),
+    onDragEnd: publish(GridEvents.columnHeaderDragEnd)
+  };
+  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;
+
+  if (sortDirection != null) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+
+  React.useEffect(() => {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  const handleExited = React.useCallback(() => {
+    setShowColumnMenuIcon(false);
+  }, []);
+
+  const columnMenuIconButton = !rootProps.disableColumnMenu && !column.disableColumnMenu && /*#__PURE__*/_jsx(ColumnHeaderMenuIcon, {
+    column: column,
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    open: showColumnMenuIcon,
+    iconButtonRef: iconButtonRef
+  });
+
+  const sortingOrder = column.sortingOrder ?? rootProps.sortingOrder;
+
+  const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+      counter: filterItemsCounter
+    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+      direction: sortDirection,
+      index: sortIndex,
+      sortingOrder: sortingOrder
+    })]
+  });
+
+  React.useLayoutEffect(() => {
+    const columnMenuState = apiRef.current.state.columnMenu;
+
+    if (hasFocus && !columnMenuState.open) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+
+      if (focusableElement) {
+        focusableElement.focus();
+      } else {
+        headerCellRef.current.focus();
+      }
+    }
+  });
+  const headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
+    field: column.field,
+    colDef: column
+  }) : column.headerClassName;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: headerCellRef,
+    className: clsx(classes.root, headerClassName),
+    "data-field": column.field,
+    style: {
+      width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    tabIndex: tabIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-sort": ariaSort
+  }, mouseEventsHandlers, {
+    children: [/*#__PURE__*/_jsxs("div", _extends({
+      className: classes.draggableContainer,
+      draggable: !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder
+    }, draggableEventHandlers, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.titleContainer,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent || /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: column.headerName ?? column.field,
+            description: column.description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, {
+      resizable: !rootProps.disableColumnResize && !!column.resizable,
+      resizing: isResizing,
+      height: headerHeight,
+      onMouseDown: publish(GridEvents.columnSeparatorMouseDown),
+      side: separatorSide
+    }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
+      columnMenuId: columnMenuId,
+      columnMenuButtonId: columnMenuButtonId,
+      field: column.field,
+      open: columnMenuOpen,
+      target: iconButtonRef.current,
+      ContentComponent: rootProps.components.ColumnMenu,
+      contentComponentProps: rootProps.componentsProps?.columnMenu,
+      onExited: handleExited
+    })]
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colIndex: PropTypes.number.isRequired,
+  column: PropTypes.object.isRequired,
+  columnMenuOpen: PropTypes.bool.isRequired,
+  disableReorder: PropTypes.bool,
+  extendRowFullWidth: PropTypes.bool.isRequired,
+  filterItemsCounter: PropTypes.number,
+  hasFocus: PropTypes.bool,
+  headerHeight: PropTypes.number.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  isLastColumn: PropTypes.bool.isRequired,
+  isResizing: PropTypes.bool.isRequired,
+  separatorSide: PropTypes.oneOf(['left', 'right']),
+  sortDirection: PropTypes.oneOf(['asc', 'desc']),
+  sortIndex: PropTypes.number,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired
+} : void 0;
+export { GridColumnHeaderItem };

package/modern/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["resizable", "resizing", "height", "side"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { capitalize } from '@mui/material/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridColumnHeaderSeparatorSides;
+
+(function (GridColumnHeaderSeparatorSides) {
+  GridColumnHeaderSeparatorSides["Left"] = "left";
+  GridColumnHeaderSeparatorSides["Right"] = "right";
+})(GridColumnHeaderSeparatorSides || (GridColumnHeaderSeparatorSides = {}));
+
+const useUtilityClasses = ownerState => {
+  const {
+    resizable,
+    resizing,
+    classes,
+    side
+  } = ownerState;
+  const slots = {
+    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${capitalize(side)}`],
+    icon: ['iconSeparator']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridColumnHeaderSeparatorRaw(props) {
+  const {
+    height,
+    side = GridColumnHeaderSeparatorSides.Right
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+
+  const ownerState = _extends({}, props, {
+    side,
+    classes: rootProps.classes
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  const stopClick = React.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      className: classes.root,
+      style: {
+        minHeight: height,
+        opacity: rootProps.showColumnRightBorder ? 0 : 1
+      }
+    }, other, {
+      onClick: stopClick,
+      children: /*#__PURE__*/_jsx(rootProps.components.ColumnResizeIcon, {
+        className: classes.icon
+      })
+    }))
+  );
+}
+
+const GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  height: PropTypes.number.isRequired,
+  resizable: PropTypes.bool.isRequired,
+  resizing: PropTypes.bool.isRequired,
+  side: PropTypes.oneOf(['left', 'right'])
+} : void 0;
+export { GridColumnHeaderSeparator, GridColumnHeaderSeparatorSides };

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    icon: ['sortIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function getIcon(icons, direction, className, sortingOrder) {
+  let Icon;
+  const iconProps = {};
+
+  if (direction === 'asc') {
+    Icon = icons.ColumnSortedAscendingIcon;
+  } else if (direction === 'desc') {
+    Icon = icons.ColumnSortedDescendingIcon;
+  } else {
+    Icon = icons.ColumnUnsortedIcon;
+    iconProps.sortingOrder = sortingOrder;
+  }
+
+  return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: className
+  }, iconProps)) : null;
+}
+
+function GridColumnHeaderSortIconRaw(props) {
+  const {
+    direction,
+    index,
+    sortingOrder
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  const iconElement = getIcon(rootProps.components, direction, classes.icon, sortingOrder);
+
+  if (!iconElement) {
+    return null;
+  }
+
+  const iconButton = /*#__PURE__*/_jsx(IconButton, {
+    tabIndex: -1,
+    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    size: "small",
+    children: iconElement
+  });
+
+  return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+    children: [index != null && /*#__PURE__*/_jsx(Badge, {
+      badgeContent: index,
+      color: "default",
+      children: iconButton
+    }), index == null && iconButton]
+  });
+}
+
+const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  direction: PropTypes.oneOf(['asc', 'desc']),
+  index: PropTypes.number,
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
+} : void 0;
+export { GridColumnHeaderSortIcon };

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -0,0 +1,93 @@
+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 { styled } from '@mui/material/styles';
+import { isOverflown } from '../../utils/domUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaderTitle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridColumnHeaderTitleRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderTitle',
+  overridesResolver: (props, styles) => styles.columnHeaderTitle
+})(({
+  theme
+}) => ({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  fontWeight: theme.typography.fontWeightMedium
+}));
+const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridColumnHeaderTitleRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other));
+});
+
+// No React.memo here as if we display the sort icon, we need to recalculate the isOver
+function GridColumnHeaderTitle(props) {
+  const {
+    label,
+    description,
+    columnWidth
+  } = props;
+  const rootProps = useGridRootProps();
+  const titleRef = React.useRef(null);
+  const [tooltip, setTooltip] = React.useState('');
+  React.useEffect(() => {
+    if (!description && titleRef && titleRef.current) {
+      const isOver = isOverflown(titleRef.current);
+
+      if (isOver) {
+        setTooltip(label);
+      } else {
+        setTooltip('');
+      }
+    }
+  }, [titleRef, columnWidth, description, label]);
+  return /*#__PURE__*/_jsx(rootProps.components.BaseTooltip, _extends({
+    title: description || tooltip
+  }, rootProps.componentsProps?.baseTooltip, {
+    children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
+      ref: titleRef,
+      children: label
+    })
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnWidth: PropTypes.number.isRequired,
+  description: PropTypes.string,
+  label: PropTypes.string.isRequired
+} : void 0;
+export { GridColumnHeaderTitle };

package/modern/components/columnHeaders/GridColumnHeaders.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["innerRef", "className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled, alpha, lighten, darken } from '@mui/material/styles';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaders']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridColumnHeadersRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaders',
+  overridesResolver: (props, styles) => styles.columnHeaders
+})(({
+  theme
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center',
+    borderBottom: `1px solid ${borderColor}`
+  };
+});
+export const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root)
+  }, other));
+});

package/modern/components/columnHeaders/GridColumnHeadersInner.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["isDragging", "className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    isDragging,
+    hasScrollX,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridColumnHeadersInnerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'columnHeadersInner',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone
+  }, styles.columnHeadersInner]
+})(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
+    cursor: 'move'
+  },
+  [`&.${gridClasses['columnHeadersInner--scrollable']} .${gridClasses.columnHeader}:last-child`]: {
+    borderRight: 'none'
+  }
+}));
+export const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
+  const {
+    isDragging,
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    isDragging,
+    hasScrollX: apiRef.current.getRootDimensions()?.hasScrollX ?? false,
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridColumnHeadersInnerRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root)
+  }, other));
+});

package/modern/components/columnHeaders/GridColumnUnsortedIcon.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["sortingOrder"];
+import * as React from 'react';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColumnHeaderSortIcon(props) {
+  const {
+    sortingOrder
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const [nextSortDirection] = sortingOrder;
+  const Icon = nextSortDirection === 'asc' ? rootProps.components.ColumnSortedAscendingIcon : rootProps.components.ColumnSortedDescendingIcon;
+  return Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, other)) : null;
+});

package/modern/components/columnHeaders/GridIconButtonContainer.js

@@ -0,0 +1,46 @@
+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 clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['iconButtonContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridIconButtonContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'IconButtonContainer',
+  overridesResolver: (props, styles) => styles.iconButtonContainer
+})(() => ({
+  display: 'flex',
+  visibility: 'hidden',
+  width: 0
+}));
+export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other));
+});