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

package/components/cell/GridActionsCellItem.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { IconButtonProps } from '@mui/material/IconButton';
 import { MenuItemProps } from '@mui/material/MenuItem';
-export type GridActionsCellItemProps = {
+interface GridActionsCellItemCommonProps {
     label: string;
     icon?: React.ReactElement;
     /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
     component?: React.ElementType;
-} & (({
+}
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
     showInMenu?: false;
     icon: React.ReactElement;
-} & IconButtonProps) | ({
+} & Omit<IconButtonProps, 'component'>) | ({
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -17,25 +18,11 @@ export type GridActionsCellItemProps = {
      */
     closeMenuOnClick?: boolean;
     closeMenu?: () => void;
-} & MenuItemProps));
-declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
-    label: string;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
+} & Omit<MenuItemProps, 'component'>));
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
     showInMenu?: false | undefined;
     icon: React.ReactElement;
-} & import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "sx" | "classes" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}, "ref"> | Omit<{
-    label: string;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
+} & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -43,9 +30,5 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
      */
     closeMenuOnClick?: boolean | undefined;
     closeMenu?: (() => void) | undefined;
-} & import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}, "ref">) & React.RefAttributes<HTMLElement>>;
+} & Omit<MenuItemProps, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.js

@@ -12,7 +12,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {
-    var _rootProps$slotProps;
     const {
         label,
         icon,
@@ -20,7 +19,7 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded);
     const handleClick = event => {
-      onClick == null || onClick(event);
+      onClick?.(event);
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
@@ -29,7 +28,7 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       "aria-label": label
     }, other, {
       onClick: handleClick
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    }, rootProps.slotProps?.baseIconButton, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })
@@ -44,9 +43,9 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const handleClick = event => {
-    onClick == null || onClick(event);
+    onClick?.(event);
     if (closeMenuOnClick) {
-      closeMenu == null || closeMenu();
+      closeMenu?.();
     }
   };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
@@ -63,6 +62,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: PropTypes.elementType,
   icon: PropTypes.element,
   label: PropTypes.string.isRequired,
   showInMenu: PropTypes.bool

package/components/cell/GridBooleanCell.d.ts

@@ -3,6 +3,7 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+    hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element;
 declare namespace GridBooleanCellRaw {

package/components/cell/GridBooleanCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -76,6 +76,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * If true, the cell is the active element.
    */
   hasFocus: PropTypes.bool.isRequired,
+  hideDescendantCount: PropTypes.bool,
   /**
    * The grid row id.
    */
@@ -105,7 +106,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (isAutoGeneratedRow(params.rowNode)) {
+  if (params.field !== '__row_group_by_columns_group__' && isAutoGeneratedRow(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

package/components/cell/GridCell.d.ts

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import { GridRowId, GridEditCellProps } from '../../models';
 import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 export declare enum PinnedPosition {
     NONE = 0,
     LEFT = 1,
     RIGHT = 2,
     VIRTUAL = 3
 }
+export declare const gridPinnedColumnPositionLookup: {
+    1: GridPinnedColumnPosition;
+    2: GridPinnedColumnPosition;
+    0: undefined;
+    3: undefined;
+};
 export type GridCellProps = {
     align: GridAlignment;
     className?: string;

package/components/cell/GridCell.js

@@ -15,6 +15,8 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 import { jsx as _jsx } from "react/jsx-runtime";
 export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -23,6 +25,12 @@ export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
+export const gridPinnedColumnPositionLookup = {
+  [PinnedPosition.LEFT]: GridPinnedColumnPosition.LEFT,
+  [PinnedPosition.RIGHT]: GridPinnedColumnPosition.RIGHT,
+  [PinnedPosition.NONE]: undefined,
+  [PinnedPosition.VIRTUAL]: undefined
+};
 const EMPTY_CELL_PARAMS = {
   id: -1,
   field: '__unset__',
@@ -68,7 +76,6 @@ let warnedOnce = false;
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
 const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _getActions, _ref, _rootProps$cellSelect, _rootProps$experiment;
   const {
       column,
       rowId,
@@ -126,7 +133,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     value,
     formattedValue
   } = cellParamsWithAPI;
-  const canManageOwnFocus = column.type === 'actions' && ((_getActions = (_ref = column).getActions) == null ? void 0 : _getActions.call(_ref, apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled));
+  const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
   const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
   const {
     classes: rootClasses,
@@ -153,10 +160,10 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
   // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
-  const isSelectionMode = (_rootProps$cellSelect = rootProps.cellSelection) != null ? _rootProps$cellSelect : false;
-  const isSectionLastCell = sectionIndex === sectionLength - 1;
-  const showLeftBorder = pinnedPosition === PinnedPosition.RIGHT && sectionIndex === 0;
-  const showRightBorder = rootProps.showCellVerticalBorder && (pinnedPosition !== PinnedPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === PinnedPosition.LEFT && isSectionLastCell;
+  const isSelectionMode = rootProps.cellSelection ?? false;
+  const position = gridPinnedColumnPositionLookup[pinnedPosition];
+  const showLeftBorder = shouldCellShowLeftBorder(position, sectionIndex);
+  const showRightBorder = shouldCellShowRightBorder(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = {
     align,
     showLeftBorder,
@@ -236,17 +243,17 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   let handleFocus = other.onFocus;
-  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
+  if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
       const focusedCell = gridFocusCellSelector(apiRef);
-      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+      if (focusedCell?.id === rowId && focusedCell.field === field) {
         if (typeof other.onFocus === 'function') {
           other.onFocus(event);
         }
         return;
       }
       if (!warnedOnce) {
-        console.warn([`MUI X: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        console.warn([`MUI X: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell?.id}, field=${focusedCell?.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
         warnedOnce = true;
       }
     };
@@ -266,10 +273,10 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, editCellStateRest);
     children = column.renderEditCell(params);
     classNames.push(gridClasses['cell--editing']);
-    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+    classNames.push(rootClasses?.['cell--editing']);
   }
   if (children === undefined) {
-    const valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    const valueString = valueToRender?.toString();
     children = valueString;
     title = valueString;
   }

package/components/cell/GridEditBooleanCell.js

@@ -19,7 +19,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridEditBooleanCell(props) {
-  var _rootProps$slotProps;
   const {
       id: idProp,
       value,
@@ -68,7 +67,7 @@ function GridEditBooleanCell(props) {
       checked: Boolean(valueState),
       onChange: handleChange,
       size: "small"
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox))
+    }, rootProps.slotProps?.baseCheckbox))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {

package/components/cell/GridEditDateCell.js

@@ -43,7 +43,7 @@ function GridEditDateCell(props) {
     } else if (valueProp instanceof Date) {
       parsedDate = valueProp;
     } else {
-      parsedDate = new Date((valueProp != null ? valueProp : '').toString());
+      parsedDate = new Date((valueProp ?? '').toString());
     }
     let formattedDate;
     if (parsedDate == null || Number.isNaN(parsedDate.getTime())) {
@@ -96,8 +96,7 @@ function GridEditDateCell(props) {
   }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
-      var _valueTransformed$par, _state$parsed;
-      if (valueTransformed.parsed !== state.parsed && ((_valueTransformed$par = valueTransformed.parsed) == null ? void 0 : _valueTransformed$par.getTime()) !== ((_state$parsed = state.parsed) == null ? void 0 : _state$parsed.getTime())) {
+      if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {
         return valueTransformed;
       }
       return state;

package/components/cell/GridEditInputCell.js

@@ -70,7 +70,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef, debounceMs, field, id, onValueChange]);
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
   }, [meta, value]);
@@ -86,7 +86,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     ownerState: rootProps,
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
-    value: valueState != null ? valueState : '',
+    value: valueState ?? '',
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
       fontSize: "small",

package/components/cell/GridEditSingleSelectCell.js

@@ -17,7 +17,6 @@ function isKeyboardEvent(event) {
   return !!event.key;
 }
 function GridEditSingleSelectCell(props) {
-  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2;
   const rootProps = useGridRootProps();
   const {
       id,
@@ -35,17 +34,16 @@ function GridEditSingleSelectCell(props) {
   const ref = React.useRef();
   const inputRef = React.useRef();
   const [open, setOpen] = React.useState(initialOpen);
-  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
-  const _ref = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {},
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? false;
+  const _ref = rootProps.slotProps?.baseSelect || {},
     {
       MenuProps
     } = _ref,
     otherBaseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
   useEnhancedEffect(() => {
     if (hasFocus) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+      inputRef.current?.focus();
     }
   }, [hasFocus]);
   if (!isSingleSelectColDef(colDef)) {
@@ -113,9 +111,8 @@ function GridEditSingleSelectCell(props) {
     fullWidth: true
   }, other, otherBaseSelectProps, {
     children: valueOptions.map(valueOption => {
-      var _rootProps$slotProps3;
       const value = getOptionValue(valueOption);
-      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelectOption) || {}, {
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, rootProps.slotProps?.baseSelectOption || {}, {
         native: isSelectNative,
         key: value,
         value: value

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -17,7 +17,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     colDef,
     open,
@@ -41,7 +40,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('columnMenuLabel'),
       enterDelay: 1000
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         ref: iconButtonRef,
         tabIndex: -1,
@@ -53,7 +52,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         "aria-expanded": open,
         "aria-controls": open ? columnMenuId : undefined,
         id: columnMenuButtonId
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
           fontSize: "small"
         })

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -23,6 +23,7 @@ const GridColumnHeadersRoot = styled('div', {
   overridesResolver: (props, styles) => styles.columnHeaders
 })({
   display: 'flex',
+  flexDirection: 'column',
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });

package/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 interface GridColumnGroupHeaderProps {
     groupId: string | null;
     width: number;
@@ -10,6 +11,10 @@ interface GridColumnGroupHeaderProps {
     height: number;
     hasFocus?: boolean;
     tabIndex: 0 | -1;
+    pinnedPosition?: GridPinnedColumnPosition;
+    style?: React.CSSProperties;
+    indexInSection: number;
+    sectionLength: number;
 }
 declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): React.JSX.Element;
 export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -8,17 +8,20 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { isEventTargetInPortal } from '../../utils/domUtils';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
     headerAlign,
     isDragging,
-    showColumnBorder,
-    groupId
+    showLeftBorder,
+    showRightBorder,
+    groupId,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showColumnBorder && 'columnHeader--showColumnBorder', showColumnBorder && 'columnHeader--withRightBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -26,7 +29,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnGroupHeader(props) {
-  var _columnGroupsLookup$g;
   const {
     groupId,
     width,
@@ -37,7 +39,11 @@ function GridColumnGroupHeader(props) {
     colIndex,
     hasFocus,
     tabIndex,
-    isLastColumn
+    isLastColumn,
+    pinnedPosition,
+    style,
+    indexInSection,
+    sectionLength
   } = props;
   const rootProps = useGridRootProps();
   const headerCellRef = React.useRef(null);
@@ -45,12 +51,12 @@ function GridColumnGroupHeader(props) {
   const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
   const group = groupId ? columnGroupsLookup[groupId] : {};
   const {
-    headerName = groupId != null ? groupId : '',
+    headerName = groupId ?? '',
     description = '',
     headerAlign = undefined
   } = group;
   let headerComponent;
-  const render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
+  const render = groupId && columnGroupsLookup[groupId]?.renderHeaderGroup;
   const renderParams = React.useMemo(() => ({
     groupId,
     headerName,
@@ -64,15 +70,17 @@ function GridColumnGroupHeader(props) {
   if (groupId && render) {
     headerComponent = render(renderParams);
   }
-  const showColumnBorder = rootProps.showColumnVerticalBorder;
+  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = _extends({}, props, {
     classes: rootProps.classes,
-    showColumnBorder,
+    showLeftBorder,
+    showRightBorder,
     headerAlign,
     depth,
     isDragging: false
   });
-  const label = headerName != null ? headerName : groupId;
+  const label = headerName ?? groupId;
   const id = useId();
   const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
   const classes = useUtilityClasses(ownerState);
@@ -80,7 +88,7 @@ function GridColumnGroupHeader(props) {
     if (hasFocus) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
+      elementToFocus?.focus();
     }
   }, [apiRef, hasFocus]);
   const publish = React.useCallback(eventName => event => {
@@ -118,12 +126,13 @@ function GridColumnGroupHeader(props) {
     width: width,
     columnMenuIconButton: null,
     columnTitleIconButtons: null,
-    resizable: false,
+    resizable: true,
     label: label,
     "aria-colspan": fields.length
     // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
     ,
-    "data-fields": `|-${fields.join('-|-')}-|`
+    "data-fields": `|-${fields.join('-|-')}-|`,
+    style: style
   }, mouseEventsHandlers));
 }
 export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -22,7 +22,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButton(props) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     counter,
     field,
@@ -67,7 +66,7 @@ function GridColumnHeaderFilterIconButton(props) {
     "aria-haspopup": "menu",
     "aria-expanded": open,
     "aria-controls": open ? panelId : undefined
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,
       fontSize: "small"
@@ -76,7 +75,7 @@ function GridColumnHeaderFilterIconButton(props) {
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
     enterDelay: 1000
-  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
       children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
         badgeContent: counter,

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { GridStateColDef } from '../../models/colDef/gridColDef';
 import { GridSortDirection } from '../../models/gridSortModel';
 import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
+import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 interface GridColumnHeaderItemProps {
     colIndex: number;
     colDef: GridStateColDef;
@@ -16,6 +17,10 @@ interface GridColumnHeaderItemProps {
     tabIndex: 0 | -1;
     disableReorder?: boolean;
     separatorSide?: GridColumnHeaderSeparatorProps['side'];
+    pinnedPosition?: GridPinnedColumnPosition;
+    style?: React.CSSProperties;
+    indexInSection: number;
+    sectionLength: number;
 }
 declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): React.JSX.Element;
 declare namespace GridColumnHeaderItem {