@mui/x-data-grid 7.3.0 → 7.3.1

package/hooks/features/columns/gridColumnsUtils.js

@@ -110,7 +110,7 @@ export function computeFlexColumnsWidth({
  * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
  * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
  */
-export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+export const hydrateColumnsWidth = (rawState, dimensions) => {
   const columnsLookup = {};
   let totalFlexUnits = 0;
   let widthAllocatedBeforeFlex = 0;
@@ -136,10 +136,11 @@ export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
     }
     columnsLookup[columnField] = newColumn;
   });
-  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0);
+  const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
+  const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);
 
   // Allocate the remaining space to the flex columns
-  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+  if (totalFlexUnits > 0 && availableWidth > 0) {
     const computedColumnWidths = computeFlexColumnsWidth({
       initialFreeSpace,
       totalFlexUnits,
@@ -282,7 +283,7 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.().viewportInnerSize.width ?? 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.() ?? undefined);
 };
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,

package/hooks/features/columns/useGridColumns.js

@@ -133,7 +133,7 @@ export function useGridColumns(apiRef, props) {
       lookup: _extends({}, columnsState.lookup, {
         [field]: newColumn
       })
-    }), apiRef.current.getRootDimensions().viewportInnerSize.width));
+    }), apiRef.current.getRootDimensions()));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
@@ -237,14 +237,15 @@ export function useGridColumns(apiRef, props) {
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
 
-  /**
+  /*
    * EVENTS
    */
+
   const prevInnerWidth = React.useRef(null);
   const handleGridSizeChange = viewportInnerSize => {
     if (prevInnerWidth.current !== viewportInnerSize.width) {
       prevInnerWidth.current = viewportInnerSize.width;
-      setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), viewportInnerSize.width));
+      setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
@@ -264,7 +265,7 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef, logger, setGridColumnsState]);
   useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
 
-  /**
+  /*
    * EFFECTS
    */
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -19,7 +19,7 @@ export declare const getTopLevelRowCount: ({ tree, rowCountProp, }: {
     tree: GridRowTreeConfig;
     rowCountProp: DataGridProcessedProps['rowCount'];
 }) => number;
-export declare const getRowsStateFromCache: ({ apiRef, rowCountProp, loadingProp, previousTree, previousTreeDepths, }: Pick<GridRowTreeCreationParams, "previousTree" | "previousTreeDepths"> & {
+export declare const getRowsStateFromCache: ({ apiRef, rowCountProp, loadingProp, previousTree, previousTreeDepths, }: Pick<GridRowTreeCreationParams, 'previousTree' | 'previousTreeDepths'> & {
     apiRef: React.MutableRefObject<GridPrivateApiCommunity>;
     rowCountProp: number | undefined;
     loadingProp: boolean | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -8,9 +8,9 @@ export declare const useGridVirtualScroller: () => {
     renderContext: GridRenderContext;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<GridRowId, React.ReactNode>>>>;
     getRows: (params?: {
-        rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
-        position?: keyof import("../rows/gridRowsInterfaces").GridPinnedRowsState | undefined;
-        renderContext?: GridRenderContext | undefined;
+        rows?: GridRowEntry[];
+        position?: GridPinnedRowsPosition;
+        renderContext?: GridRenderContext;
     }) => React.ReactNode[];
     getContainerProps: () => {
         ref: React.RefObject<HTMLDivElement>;

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -14,8 +14,8 @@ declare enum GridSignature {
 interface RegistryContainer {
     registry: CleanupTracking | null;
 }
-export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
+export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
 export declare const unstable_resetCleanupTracking: () => void;
-export declare const useGridApiEventHandler: <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
+export declare const useGridApiEventHandler: <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
 export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
 export { GridSignature };

package/hooks/utils/useGridNativeEventListener.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridNativeEventListener: <PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap>(apiRef: React.MutableRefObject<PrivateApi>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: ((event: HTMLElementEventMap[K]) => any) | undefined, options?: AddEventListenerOptions) => void;
+export declare const useGridNativeEventListener: <PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap>(apiRef: React.MutableRefObject<PrivateApi>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: (event: HTMLElementEventMap[K]) => any, options?: AddEventListenerOptions) => void;

package/hooks/utils/useGridSelector.d.ts

@@ -3,4 +3,4 @@ import type { GridApiCommon } from '../../models/api/gridApiCommon';
 import { OutputSelector } from '../../utils/createSelector';
 import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare';
 export declare const objectShallowCompare: typeof fastObjectShallowCompare;
-export declare const useGridSelector: <Api extends GridApiCommon<any, any>, T>(apiRef: React.MutableRefObject<Api>, selector: OutputSelector<Api["state"], T> | ((state: Api["state"]) => T), equals?: (a: T, b: T) => boolean) => T;
+export declare const useGridSelector: <Api extends GridApiCommon<any, any>, T>(apiRef: React.MutableRefObject<Api>, selector: ((state: Api['state']) => T) | OutputSelector<Api['state'], T>, equals?: (a: T, b: T) => boolean) => T;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.3.0
+ * @mui/x-data-grid v7.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/joy/icons.js

@@ -18,8 +18,7 @@ const _excluded = ["sx", "fontSize"],
 import * as React from 'react';
 import SvgIcon from '@mui/joy/SvgIcon';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function createSvgIcon(path, displayName) {
   const fontSizeMap = {
     small: 'lg',

package/joy/joySlots.js

@@ -26,8 +26,7 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
 import { GridOverlay } from '../components/containers/GridOverlay';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
   if (color === 'secondary') {
     return 'primary';

package/modern/DataGrid/DataGrid.js

@@ -8,8 +8,7 @@ import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const propValidators = [...propValidatorsDataGrid,
 // Only validate in MIT version
 props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];

package/modern/colDef/gridDateOperators.js

@@ -7,6 +7,13 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   if (showTime) {
     date.setSeconds(0, 0);
   } else {
+    // In GMT-X timezone, the date will be one day behind.
+    // For 2022-08-16:
+    // GMT+2: Tue Aug 16 2022 02:00:00 GMT+0200
+    // GMT-4: Mon Aug 15 2022 20:00:00 GMT-0400
+    //
+    // We need to add the offset before resetting the hours.
+    date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
     date.setHours(0, 0, 0, 0);
   }
   const time = date.getTime();

package/modern/components/GridFooter.js

@@ -9,8 +9,7 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridSelectedRowCount } from './GridSelectedRowCount';
 import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();

package/modern/components/GridHeader.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/modern/components/GridHeaders.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { fastMemo } from '../utils/fastMemo';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
@@ -30,7 +31,7 @@ function GridHeaders() {
   apiRef.current.register('private', {
     columnHeadersContainerRef: columnsContainerRef
   });
-  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, {
+  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,
     visibleColumns: visibleColumns,
     filterColumnLookup: filterColumnLookup,
@@ -44,7 +45,7 @@ function GridHeaders() {
     columnVisibility: columnVisibility,
     columnGroupsHeaderStructure: columnGroupsHeaderStructure,
     hasOtherElementInTabSequence: hasOtherElementInTabSequence
-  });
+  }, rootProps.slotProps?.columnHeaders));
 }
 const MemoizedGridHeaders = fastMemo(GridHeaders);
 export { MemoizedGridHeaders as GridHeaders };

package/modern/components/GridRow.js

@@ -24,8 +24,7 @@ import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditing
 import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     editable,

package/modern/components/cell/GridActionsCell.js

@@ -10,8 +10,7 @@ import { gridClasses } from '../../constants/gridClasses';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {

package/modern/components/cell/GridActionsCellItem.js

@@ -7,8 +7,7 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -10,8 +10,7 @@ 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -13,8 +13,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { isEventTargetInPortal } from '../../utils/domUtils';
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     colDef,

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -7,8 +7,7 @@ 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -8,8 +8,7 @@ import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiCon
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -12,8 +12,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useLazyRef } from '../../hooks/utils/useLazyRef';
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/components/containers/GridRoot.js

@@ -12,8 +12,7 @@ import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiCon
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     autoHeight,

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.js

@@ -3,8 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridColumnMenuHideItem } from './GridColumnMenuHideItem';
 import { GridColumnMenuManageItem } from './GridColumnMenuManageItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuColumnsItem(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnMenuHideItem, _extends({}, props)), /*#__PURE__*/_jsx(GridColumnMenuManageItem, _extends({}, props))]

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -5,8 +5,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuFilterItem(props) {
   const {
     colDef,

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -6,8 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
 import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuHideItem(props) {
   const {
     colDef,

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -6,8 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuManageItem(props) {
   const {
     onClick

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

@@ -7,8 +7,7 @@ import { useGridSelector } from '../../../../hooks/utils/useGridSelector';
 import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector';
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuSortItem(props) {
   const {
     colDef,

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -15,9 +15,8 @@ import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
 import { getValueFromValueOptions, getValueOptions } from './filterPanelUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',

package/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -15,14 +15,14 @@ function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (Number.isNaN(dateCopy.getTime())) {
     return '';
   }
-  // The date picker expects the date to be in the local timezone.
-  // But .toISOString() converts it to UTC with zero offset.
-  // So we need to subtract the timezone offset.
-  dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
   if (inputType === 'date') {
     return dateCopy.toISOString().substring(0, 10);
   }
   if (inputType === 'datetime-local') {
+    // The date picker expects the date to be in the local timezone.
+    // But .toISOString() converts it to UTC with zero offset.
+    // So we need to subtract the timezone offset.
+    dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
     return dateCopy.toISOString().substring(0, 19);
   }
   return dateCopy.toISOString().substring(0, 10);

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -8,8 +8,7 @@ import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const renderSingleSelectOptions = ({
   column,
   OptionComponent,

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -13,8 +13,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getGridFilter = col => ({
   field: col.field,
   operator: col.filterOperators[0].value,

package/modern/components/toolbar/GridToolbar.js

@@ -11,8 +11,7 @@ import { GridToolbarFilterButton } from './GridToolbarFilterButton';
 import { GridToolbarExport } from './GridToolbarExport';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -12,8 +12,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -8,8 +8,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
     children,

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -12,8 +12,7 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/components/virtualization/GridVirtualScroller.js

@@ -18,8 +18,7 @@ import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerCont
 import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
 import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
 import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, dimensions) => {
   const {
     classes

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -5,8 +5,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { gridClasses } from '../../constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div')({
   display: 'flex',
   flexDirection: 'row',

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -16,8 +16,7 @@ import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/
 import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
 import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
 import { gridClasses } from '../../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
@@ -294,6 +294,21 @@ export const useGridColumnResize = (apiRef, props) => {
     if (refs.colDef) {
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+      const columnsState = gridColumnsStateSelector(apiRef.current.state);
+      refs.groupHeaderElements.forEach(element => {
+        const fields = getFieldsFromGroupHeaderElem(element);
+        const div = element;
+        const newWidth = fields.reduce((acc, field) => {
+          if (columnsState.columnVisibilityModel[field] !== false) {
+            return acc + columnsState.lookup[field].computedWidth;
+          }
+          return acc;
+        }, 0);
+        const finalWidth = `${newWidth}px`;
+        div.style.width = finalWidth;
+        div.style.minWidth = finalWidth;
+        div.style.maxWidth = finalWidth;
+      });
     }
     stopResizeEventTimeout.start(0, () => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -110,7 +110,7 @@ export function computeFlexColumnsWidth({
  * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
  * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
  */
-export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+export const hydrateColumnsWidth = (rawState, dimensions) => {
   const columnsLookup = {};
   let totalFlexUnits = 0;
   let widthAllocatedBeforeFlex = 0;
@@ -136,10 +136,11 @@ export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
     }
     columnsLookup[columnField] = newColumn;
   });
-  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0);
+  const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
+  const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);
 
   // Allocate the remaining space to the flex columns
-  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+  if (totalFlexUnits > 0 && availableWidth > 0) {
     const computedColumnWidths = computeFlexColumnsWidth({
       initialFreeSpace,
       totalFlexUnits,
@@ -282,7 +283,7 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.().viewportInnerSize.width ?? 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.() ?? undefined);
 };
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,